<template>
  <div>
    <div class="content">
      <div class="header">
        <!-- 修改表单区域 -->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
         
          <el-form-item  >
            <el-input
                v-model="_key_word"
         
                class="input-with-select"
              
              >
                <template #prepend>
                  <el-select
                      v-model="_key_type"
                      placeholder="请选择"
                      style="width: 100px"
                    >
                      <el-option
                        v-for="item in searchList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                </template>
               
              </el-input>
          </el-form-item>
    
          <el-form-item label="商品分类" style="width: 200px">
            <el-tree-select
              v-model="scid"
              :data="shangpingFenDate"
              
              show-checkbox
              style="width: 100%"
              @check="handleCheck"
            />

          </el-form-item>
          <el-form-item label="商品类型" >
            <el-select
                      v-model="_goods_type"
                      placeholder="请选择"
                      style="width: 120px"
                    >
                      <el-option
                        v-for="item in shangpingDate"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>

          </el-form-item>
          <el-form-item label="商品状态" style="width: 200px"  v-show="!heShow">
            <el-select
              v-model="_goods_status"
              placeholder="请选择"
              style="width: 200px"
            >
              <el-option
                v-for="item in shoppingList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          
          <el-form-item label="来源类型"   v-show="!heShow">
           <!-- ✅ 去掉 placeholder 或确认默认值匹配 -->
<el-select v-model="provide_types" style="width: 200px" @change="getchange(provide_types)">
    <el-option
        v-for="item in proviedeList"
        :key="item.value"
        :label="item.label"
        :value="item.value"
    />
</el-select>

          </el-form-item>
          <el-form-item label="渠道" style="width: 200px" v-if="!heShow2" v-show="!heShow">
            <el-select
              v-model="dockId"
              placeholder="请选择"
              style="width: 200px"
            >
              <el-option
                v-for="item in qudaoList"
                :key="item.value"
                :label="item.lable"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        
         
         
          <el-form-item label="渠道商品" style="width: 200px" v-if="!heShow2" v-show="!heShow">
            <el-input v-model="dock_goods_id"  />
          </el-form-item>
          <el-form-item label="供货商" style="width: 200px" v-if="!heShow3" v-show="!heShow">
            <el-input v-model="for_user"  />
          </el-form-item>

          <el-form-item label="库存状态"  v-show="!heShow" >
            <el-select
              v-model="_stock_state"
              placeholder="请选择"
              style="width: 200px"
            >
              <el-option
                v-for="item in kecunDate"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="模版状态" style="width: 200px"  v-show="!heShow">
            <el-select
              v-model="_template_state"
              placeholder="请选择"
              style="width: 200px"
            >
              <el-option
                v-for="item in mobanDate"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="分类状态" style="width: 200px"  v-show="!heShow">
            <el-select
              v-model="_dir_state"
              placeholder="请选择"
              style="width: 200px"
            >
              <el-option
                v-for="item in fenleiList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
         
          <el-form-item>
            <el-button type="primary" @click="submitSee">查询</el-button>
            <el-button type="primary" plain @click="openChong">重置</el-button>
            <span class="he" v-show="!heShow" @click="btnHe2">
              合并
              <el-icon><ArrowUp /></el-icon>
            </span>
            <span class="he" v-show="heShow" @click="btnHe">
              展开
              <el-icon><ArrowDown /></el-icon>
            </span>
          </el-form-item>
        </el-form>
      </div>
      <div class="area">
        <div style="border-bottom: 1px solid #3333; width: 97%; margin: 0 auto">
          <div class="header-area">
            <div
              class="tab-name"
              v-for="(item, index) in tabList"
              :key="index"
              :class="{ tabname: tabname == index }"
              @click="btnTable(index)"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
        <div class="tab-header" style="margin-top: 20px">
          <!-- <div class="tabs">
            <el-button type="danger" @click="addOpen"
              >批量删除({{ tabList[0].name }})</el-button
            >
          </div> -->
          <div class="tabs">
            <el-dropdown>
              <span class="el-dropdown-link" @click="btnSee">
                <el-button type="primary">添加商品</el-button>
              </span>
            </el-dropdown>
          </div>

          <div class="tabs">
            <el-menu
              style="position: relative; top: -15px; border: none"
              :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              :ellipsis="false"
              @select="handleSelect"
            >
              <el-sub-menu index="2">
                <template #title>
                  <el-button style="width: 100px">更多操作</el-button>
                </template>

                <!-- 第一层循环：主分类 -->
                <el-sub-menu
                  v-for="(item, index) in moreDate"
                  :key="`category-${index}`"
                  :index="`2-${index}`"
                >
                  <template #title>{{ item.label }}</template>

                  <!-- 第二层循环：子项 -->
                  <el-menu-item
                    v-for="(child, childIndex) in item.children"
                    :key="`child-${index}-${childIndex}`"
                    :index="`2-${index}-${childIndex}`"
                  >
                    <span @click="getPiliang(child)">{{ child.label }}</span>
                  </el-menu-item>
                </el-sub-menu>
              </el-sub-menu>
            </el-menu>

          </div>
          
        </div>

        <div class="table-area" style="position: relative; top: -30px">
          <el-table
            ref="tableRef"
            :data="dataList"
            stripe
            @selection-change="handleSelectionChange"
            border
            row-key="id"
          >
            <el-table-column width="50" align="center">
              <template #default>
                <div class="drag-handle" style="cursor: pointer">
                  <el-icon :size="16">
                    <svg viewBox="0 0 24 24" width="1em" height="1em">
                      <path
                        d="M8 6h2V4H8v2zm0 4h2V8H8v2zm0 4h2v-2H8v2zm0 4h2v-2H8v2zm4-12h2V4h-2v2zm0 4h2V8h-2v2zm0 4h2v-2h-2v2zm0 4h2v-2h-2v2z"
                        fill="currentColor"
                      ></path>
                    </svg>
                  </el-icon>
                </div>
              </template>
            </el-table-column>

            <el-table-column type="expand">
              <template #default="props">
                <div>
                  <div class="lie-top">
                    <div class="inputs2">
                      <el-input
                        class="lie-input"
                        disabled
                        v-model="props.row.children[0].face_value"
                      >
                        <template #prepend>商品面值</template>
                      </el-input>
                    </div>
                    <div class="inputs2">
                      <el-input
                        class="lie-input"
                        disabled
                        v-model="props.row.children[0].template_type_id"
                      >
                        <template #prepend>模版名称</template>
                      </el-input>
                    </div>
                    <div class="inputs2">
                      <el-input
                        class="lie-input"
                        disabled
                        v-model="props.row.children[0]._category_names"
                      >
                        <template #prepend>分类名称</template>
                      </el-input>
                    </div>
                    <div class="inputs2">
                      <el-input
                        class="lie-input"
                        disabled
                        v-model="props.row.children[0].cost_value"
                      >
                        <template #prepend>成本价</template>
                      </el-input>
                    </div>
                    <div class="inputs2">
                      <el-input
                        class="lie-input"
                        disabled
                        v-model="props.row.children[0].order_count"
                      >
                        <template #prepend>商品销量</template>
                      </el-input>
                    </div>
                    <div class="inputs2">
                      <el-input
                        class="lie-input"
                        disabled
                        v-model="props.row.children[0].template_type_id"
                      >
                        <template #prepend>商品模版</template>
                      </el-input>
                    </div>
                  </div>
                </div>
                <!-- <div>
                  <el-table :data="props.row.children" :border="childBorder">
                    <el-table-column
                      label="跨系统名称"
                      prop="docking_name_text"
                    />
                    <el-table-column label="面值" prop="face_value" />
                    <el-table-column label="模版名称" prop="template_type_id" />
                    <el-table-column label="分类名称" prop="_category_names" />

                    <el-table-column label="成本价" prop="cost_value" />
                  </el-table>
                </div> -->
              </template>
            </el-table-column>
            <el-table-column type="selection" align="center" width="55" />

            <el-table-column
              prop="id"
              align="center"
              label="商品编号"
              width="100"
              #default="scope"
            >
              <div style="cursor: pointer">
                <span
                  style="color: #1890ff"
                  @click="openGoodsDetail(scope.row.id)"
                  >{{ scope.row.id }}</span
                >
                <span
                  @click="btnOrdersn(scope.row.id)"
                  style="position: relative; top: 2px; left: 6px"
                  ><el-icon> <CopyDocument /> </el-icon
                ></span>
              </div>
            </el-table-column>
            <el-table-column
              prop="goods_imgs"
              align="center"
              label="商品图片"
              width="100"
              #default="scope"
            >
              <div>
                <el-upload
                  :file-list="transformFileList(scope.row.goods_imgs)"
                  action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
                  list-type="picture-card"
                  :on-preview="handlePreview"
                  :before-remove="
                    (file) => handleBeforeRemove2(file, scope.row)
                  "
                  :on-remove="(file) => handleRemove3(file, scope.row)"
                >
                  <!-- 隐藏默认上传按钮 -->
                  <template #trigger></template>
                  <!-- 保留插槽以维持卡片样式 -->
                </el-upload>
                <!-- 动态显示提示 -->
                <div v-if="showEmptyTip(scope.row)">
                  <div
                    class="tutu"
                    @click="btnaddimg(scope.row)"
                    style="position: relative; left: 10px; top: -10px"
                  >
                    <el-icon><Plus /></el-icon>
                  </div>
                </div>
              </div>
              <!-- 图片查看器 -->
              <el-image-viewer
                v-if="showViewer"
                :url-list="previewImages"
                :initial-index="previewIndex"
                @close="showViewer = false"
              />
            </el-table-column>
            <el-table-column
              align="center"
              label="排序"
              width="170"
              #default="scope"
            >
              <span class="paixu"
                ><el-icon @click="btntop(scope.row)"><Upload /></el-icon
              ></span>
              <span class="paixu"
                ><el-icon @click="btnup(scope.row)"><Top /></el-icon
              ></span>
              <span class="paixu"
                ><el-icon @click="btndown(scope.row)"><Bottom /></el-icon
              ></span>
              <span class="paixu"
                ><el-icon @click="btnfoot(scope.row)"><Download /></el-icon
              ></span>
            </el-table-column>
            <el-table-column
              prop="goods_name"
              align="center"
              label="商品名称"
              width="220"
              #default="scope"
            >
              <el-tooltip
                class="box-item"
                effect="dark"
                :content="scope.row.goods_name"
                placement="top-start"
              >
                <div
                  @click="btnGoodsName(scope.row)"
                  class="nameshopping"
                  style="color: #1890ff"
                >
                  {{ scope.row.goods_name }}
                </div>
              </el-tooltip>
            </el-table-column>
            <el-table-column
              prop="provide_type"
              align="center"
              label="来源"
              width="200"
              #default="scope"
            >
              <div class="types-name" v-if="scope.row.provide_type == '自营'">
                <div class="types-name" style="background-color: #13ce66">
                  {{ scope.row.provide_type }}
                </div>
              </div>
              <div
                class="types-name"
                style="width: 142px"
                v-if="scope.row.provide_type == '渠道'"
              >
                <div style="display: flex">
                  <div class="types-name" style="background-color: red">
                    {{ scope.row.provide_type }}
                  </div>
                  <div class="types-name" style="background-color: #ffba00">
                    {{ scope.row.docking_name_text }}
                  </div>
                </div>
              </div>

              <div
                class="types-name"
                style="background-color: #ffba00"
                v-if="scope.row.provide_type == '供货'"
              >
                {{ scope.row.provide_type }}
              </div>
              <div
                class="types-name"
                style="background-color: #13ce66"
                v-if="scope.row.provide_type == '一键通'"
              >
                {{ scope.row.provide_type }}
              </div>
              <div
                class="types-name"
                style="background-color: #13ce66"
                v-if="scope.row.provide_type == '比价通'"
              >
                {{ scope.row.provide_type }}
              </div>
              <div
                class="types-name"
                style="background-color: #13ce66"
                v-if="scope.row.provide_type == '平台间对接'"
              >
                {{ scope.row.provide_type }}
              </div>
              <div
                class="types-name"
                style="background-color: rgb(255, 186, 0); width: 70px"
                v-if="scope.row.provide_type == '商家供货'"
              >
                {{ scope.row.provide_type }}
              </div>
            </el-table-column>
            <el-table-column
              align="center"
              prop="status"
              label="状态"
              width="100"
              #default="scope"
            >
              <div
                class="types-name"
                @click="btnTypename(scope.row)"
                v-if="scope.row.status == '销售'"
                style="background-color: #13ce66; cursor: pointer"
              >
                {{ scope.row.status }}
              </div>
              <div
                class="types-name"
                @click="btnTypename(scope.row)"
                v-if="scope.row.status == '暂停'"
                style="background-color: #ffba00; cursor: pointer"
              >
                {{ scope.row.status }}
              </div>
              <div
                class="types-name"
                @click="btnTypename(scope.row)"
                v-if="scope.row.status == '禁售'"
                style="background-color: red; cursor: pointer"
              >
                {{ scope.row.status }}
              </div>
            </el-table-column>
            <el-table-column
              align="center"
              prop="cost_value"
              label="成本（元）"
              width="100"
              #default="scope"
            >
              <div class="order-name" @click="btnPrice(scope.row.cost_value)">
                <el-tooltip
                  class="box-item"
                  effect="dark"
                  content="点击查看售价"
                  placement="top-start"
                >
                  {{ scope.row.cost_value }}
                </el-tooltip>
              </div>
            </el-table-column>
            <el-table-column
              align="center"
              prop="face_value"
              label="售价"
              width="60"
              #default="scope"
            >
              <div class="shoujia" @click="btnShou(scope.row)">查看</div>
            </el-table-column>
            <el-table-column
              align="center"
              prop="stock_num"
              label="库存"
              width="100"
              #default="scope"
            >
              <div class="kucun" @click="btnKu(scope.row)">
                {{ scope.row.stock_num }}
              </div>
            </el-table-column>
            <el-table-column
              align="center"
              prop="goods_type"
              label="类型"
              width="100"
              #default="scope"
            >
              <div v-if="scope.row.goods_type=='充值商品' "  style="color: #1890ff;">
								<!-- <span>查看</span> -->
                {{ scope.row.goods_type }}
							</div>
              <div
                v-if="scope.row.goods_type == '卡密商品'"
                style="color: #13ce66"
              >
                {{ scope.row.goods_type }}
              </div>
              <div
                v-if="scope.row.goods_type == '实物商品'"
                style="color: #ffba00"
              >
                {{ scope.row.goods_type }}
              </div>
              <div v-if="scope.row.goods_type == '29wk'" style="color: red">
                {{ scope.row.goods_type }}
              </div>
            </el-table-column>

            <el-table-column
              align="center"
              fixed="right"
              label="操作"
              min-width="240"
            >
              <template #default="scope">
                <div
                  :style="
                    isMobile ? 'display: flex; flex-direction: column;' : ''
                  "
                >
                  <el-button
                    type="primary"
                    plain
                    size="small"
                    @click="btnSee2(scope.row, 0)"
                    style="margin-bottom: 5px"
                    >复制</el-button
                  >
                  <el-button
                    type="primary"
                    plain
                    size="small"
                    @click="btnEdint(scope.row)"
                    style="margin-bottom: 5px"
                    >编辑</el-button
                  >
                  <el-button
                    type="danger"
                    plain
                    size="small"
                    @click="handleDelete(scope.row.id)"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 新增分页组件 -->
        <div class="pagination-container">
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handlePageSizeChange"
            @current-change="handleCurrentPageChange"
          />
        </div>
      </div>
    </div>

    <!-- 详情 -->
    <el-drawer
      v-model="drawer"
      :size="'45vw'"
      :with-header="false"
      @opened="handleDrawerOpened"
    >
      <div class="contents-title"></div>
      <div class="img-content">
        <div class="img-left">
          <div>
            <img
              class="imgsleft"
              v-if="forms.goods_imgs"
              :src="forms.goods_imgs"
              alt=""
            />
            <el-icon
              class="icons2"
              v-if="!forms.goods_imgs"
              :size="50"
              :color="color"
            >
              <PictureFilled />
            </el-icon>
          </div>
        </div>
        <div class="right-name" style="margin-left: 12px">
          <div style="position: relative; top: 10px">
            {{ forms.goods_name }}
          </div>
          <div class="bianhao">
            商品id： {{ forms.id }}
            <span
              @click="btnOrdersn2(orderObj.ordersn)"
              style="position: relative; top: 2px; cursor: pointer"
              ><el-icon> <CopyDocument /> </el-icon
            ></span>
          </div>
        </div>
      </div>

      <div class="areas">
        <div class="areas-header">
          <div class="area-tab">
            <div
              class="area-name"
              v-for="(item, index) in tabsList"
              :key="index"
              :class="{ activeTabs: activeTab == index }"
              @click="btnActive(index)"
            >
              {{ item.name }}
            </div>
          </div>
          <!-- 所有内容编辑内容就写在这里 -->
          <div class="area-right">
            <div v-show="activeTab == 0">
              <el-form :model="form" label-width="120px">
                <el-form-item label="商品类型">
                  <div class="content-type">
                    <div
                      class="type-shop"
                      v-for="(item, index) in typeList"
                      :key="index"
                      :class="{ activeType: activeType == index }"
                      @click="btnTypenames(index, item)"
                    >
                      <div class="kami-type">{{ item.name }}</div>
                      <div class="zidong">{{ item.name1 }}</div>
                    </div>
                  </div>
                </el-form-item>
                <!-- <el-form-item label="商品规格">
                  <el-radio-group v-model="radio">
                    <el-radio :label="3">单规格</el-radio>
                    <el-radio :label="6">多规格</el-radio>
                  </el-radio-group>
                </el-form-item> -->

                <el-form-item label="商品分类">
                  <span class="bitian">*</span>
                  <el-col :span="11">
                    <el-tree-select
                      style="width: 232px"
                      v-model="forms.category_ids"
                      :data="categorylist"
                      multiple
                      :render-after-expand="false"
                      show-checkbox
                    />
                    <!-- <el-input v-model="forms.category_ids" placeholder="请选择" />
                    <el-tree
                      :filter-node-method="filterNode"
                      ref="treeRef"
                      :data="categorylist"
                      :props="defaultProps"
                      show-checkbox
                    /> -->
                  </el-col>
                </el-form-item>
                <el-form-item label="商品名称">
                  <span class="bitian">*</span>
                  <el-input style="width: 470px" v-model="forms.goods_name" />
                </el-form-item>
                <el-form-item label="商品简称">
                  <el-input
                    style="width: 470px; margin-left: 6px"
                    v-model="forms.goods_short_name"
                    placeholder="商品简称可不填"
                  />
                </el-form-item>
                <el-form-item label="商品图片">
                  <div class="imgList" v-if="imgDate.length > 0">
                    <div
                      class="imgs2"
                      v-for="(item, index) in imgDate"
                      :key="index"
                    >
                      <img class="imgs2" :src="item.url" alt="" />
                      <span class="img-xx" @click="btnxx(index)">x</span>
                    </div>
                  </div>
                  <div class="tutu" @click="btnimg">
                    <el-icon><Plus /></el-icon>
                  </div>
                </el-form-item>

                <el-form-item label="商品视频">
                  <el-input style="width: 470px;margin-left: 6px;" v-model="forms.goods_video" />

                  <!-- <div @click="btnVideo">
                    <el-button type="primary" style="margin-left: 7px;" size="small">新增视频</el-button>
                  </div> -->
                </el-form-item>
                <el-form-item label="商品面值">
                  <span class="bitian">*</span>
                  <el-input style="width: 470px" v-model="forms.face_value">
                    <template #append>元</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="颜色">
                  <el-color-picker
                    style="margin-left: 6px"
                    v-model="forms.goods_name_color"
                  />
                </el-form-item>
                <el-form-item label="成本价">
                  <span class="bitian" style="left: -62px;">*</span>
                  <el-input
                  @input="btninputceng"
                    v-model="forms.cost_value"
                    style="margin-left: 6px; width: 470px"
                  >
                    <template #append>元</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="定价类型">
                  <el-radio-group
                    v-model="forms.goods_price_renew_type"
                    style="margin-left: 6px"
                  >
                    <el-radio :label="1">定价模版</el-radio>
                    <el-radio :label="2">自定义模版</el-radio>
                  </el-radio-group>
                </el-form-item>
                <!-- 定价模版 -->
                <div
                  v-show="forms.goods_price_renew_type == 1"
                  style="margin-left: 6px"
                >
                  <span class="bitian">*</span>
                  <el-form-item label="定价模版">
                    <el-select
                      v-model="forms.priceName_id"
                      class="m-2"
                      style="
                        position: relative;
                        top: -9px;
                        position: relative;
                        left: -10px;
                      "
                      @change="getdingjia(forms.priceName_id)"
                    >
                      <el-option
                        v-for="item in piliangdingjia"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                    <span class="adds" @click="btnMoban">新增模版</span>
                  </el-form-item>
                </div>
                <!-- 自定义模版 -->

             
                <div v-if="forms.goods_price_renew_type == 2">
                  <div class="jibies">
                    <el-form-item label="级别差价">
                      <el-input
                        v-model="dingjiaInput"
                        @input="btnInput"
                        style="width: 470px; margin-left: 6px"
                      />
                    </el-form-item>
                  </div>
                  <div class="jibies">
                    <el-form-item label="定价策略">
                      <el-select
                        v-model="dingjiaInputs"
                        style="width: 232px; position: relative; top: -3px"
                        class="m-2"
                        placeholder="请选择"
                           @change="getChelue"
                      >
                        <el-option
                          v-for="item in dingjiaList"
                          :key="item.value"
                          :label="item.lable"
                          :value="item.value"
                       
                        />
                      </el-select>
                    </el-form-item>
                  </div>
                  <div
                  
                    class="jibies"
                    v-for="(item, index) in pricetpllist"
                    :key="index"
                  >
                    <el-form-item :label="item.priceName">
                      <el-input
                        v-model="item.pricePrice"
                        style="width: 470px; margin-left: 6px"
                         @input="btnInput2(item)"
                      >
                        <template #append>元 + 商品销售价</template>
                      </el-input>
                    </el-form-item>
                  </div>
                </div>
                <!-- <el-form-item label="模版类型">
                  <el-radio-group v-model="radio">
                    <el-radio :label="3">本地模版</el-radio>
                    <el-radio :label="6">自定义模版</el-radio>
                  </el-radio-group>
                </el-form-item> -->
             

             


                <el-form-item label="级别价格">
                  <el-table
                    :data="pricelists3"
                    border
                    style="width: 470px; margin-top: 12px; margin-left: 6px"
                  >
                    <el-table-column
                      prop="priceName"
                      label="级别"
                      align="center"
                    />
                    <el-table-column
                      prop="pricePrice"
                      label="售价"
                      align="center"
                    />
                  </el-table>
                </el-form-item>
             


                <div>
                <span style="position: relative;
    top: 31px;
    left: 45px;color:red;">*</span>
                <el-form-item label="下单模版" v-show="activeType == 1">
                  <el-select
                    v-model="forms.template_type_id"
                    style="width: 232px; position: relative; top: -3px"
                    class="m-2"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in tpllists"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </div>
   <el-form-item label="商品状态">
                  <el-radio-group v-model="radio" style="margin-left: 5px">
                    <el-radio :label="1">销售</el-radio>
                    <el-radio :label="2">暂停</el-radio>
                    <el-radio :label="3">禁售</el-radio>
                  </el-radio-group>
                </el-form-item>

              </el-form>
            </div>
            <div v-show="activeTab == 1">
              <!-- 商家供货 -->
              <div class="inputs" v-show="shangjia">
                <span>商品来源</span>
                <el-input
                  v-model="laiyuan"
                  :disabled="shopDisable"
                  style="width: 220px; margin-left: 26px"
                />
              </div>
              <div class="inputs" v-show="shangjia">
                <span>渠道商品ID</span>
                <el-input
                  v-model="forms.docking_goods_id"
                  style="width: 220px; margin-left: 12px"
                />
              </div>
              <div class="inputs" v-show="shangjia">
                <span>商品类型</span>
                <el-select
                  v-model="goodsTypes"
                  class="m-2"
                  placeholder="请选择"
       
                  @clear="getclear"
                  clearable
                  style="margin-left: 27px"
                >
                  <el-option
                    v-for="item in typeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </div>
                    <!-- 自营 -->
              <div class="inputs" v-show="qudaoName">
                <span>商品来源</span>
                <el-input
                  v-model="laiyuan"
                  :disabled="shopDisable"
                  style="width: 220px; margin-left: 26px"
                />
              </div>
              <div class="inputs" v-show="qudaoName">
                <span>商品类型</span>
                <el-select
                  v-model="goodsTypes"
                  class="m-2"
                  placeholder="请选择"
       
                  @clear="getclear"
                  clearable
                  style="margin-left: 27px"
                >
                  <el-option
                    v-for="item in typeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </div>
              <div class="inputs" v-show="qudaoName" style="position: relative;top:7px">
                <span>库存</span>
                <el-input
                  v-model="forms.stock_num"
                  style="width: 220px; margin-left: 56px"
                  :disabled="goodsTypes ==1"
                />
              </div>
              <!-- 这里是渠道对接 -->
              <div class="inputs" v-show="laiyuanShow">
                <span>渠道名称</span>
                <el-select
                  v-model="forms.docking_id"
                  class="m-2"
                  placeholder="请选择"
                  @change="qudaoSelect(forms.docking_id)"
                  @clear="getclear"
                  clearable
                  style="margin-left: 27px"
                >
                  <el-option
                    v-for="item in docklist"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
              <div class="inputs" v-show="laiyuanShow">
                <span>渠道商品ID</span>
                <el-input
                  v-model="forms.docking_goods_id"
                  style="width: 220px; margin-left: 12px"
                />
              </div>
              <div class="inputs" v-show="laiyuanShow">
                <span>商品类型</span>
                <el-select
                  v-model="goodsTypes"
                  class="m-2"
                  placeholder="请选择"
       
                  @clear="getclear"
                  clearable
                  style="margin-left: 27px"
                >
                  <el-option
                    v-for="item in typeList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </div>
              <div class="inputs" v-show="laiyuanShow" style="position: relative;top:7px">
                <span>库存</span>
                <el-input
                  v-model="forms.stock_num"
                  style="width: 220px; margin-left: 56px"
                />
              </div>
              <div class="inputs" v-show="daokaShow2">
                <el-button type="primary">导卡/查卡</el-button>
              </div>
             

         
            </div>
            <!-- 处理富文本编辑器 -->
            <div v-if="activeTab == 2">
              <el-button type="primary"  v-show="piliangHtmlShow3" @click="btnkeshihua3">可视化界面</el-button>
                <el-input
                style="margin-top: 12px;"
                  v-model="piliangHtmls3"
                  v-show="piliangHtmlShow3"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  type="textarea"
                 
                />
          
            <div  v-show="!piliangHtmlShow3">
              <el-form-item label="">
                <div class="editor-wrapper">
                  <!-- 新增包裹容器 -->
                  <div
                    v-if="boboShow"
                    @input="updateContent"
                    ref="editorContainer"
                    class="custom-editor"
                    style="height: 300px; width: 100%"
                     v-html="forms.goods_info"
                  ></div>
                  </div>
                </el-form-item>
            </div>
            </div>
            <div v-if="activeTab == 3">
              <el-button type="primary"  v-show="piliangHtmlShow4" @click="btnkeshihua4">可视化界面</el-button>
                <el-input
                style="margin-top: 12px;"
                  v-model="piliangHtmls4"
                  v-show="piliangHtmlShow4"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  type="textarea"
                 
                />
              <div  v-show="!piliangHtmlShow4">
              <el-form-item label="">
                <div class="editor-wrapper">
                  <!-- 新增包裹容器 -->
                  <div
                    v-if="boboShow"
                    @input="updateContent2"
                    ref="editorContainer4"
                    class="custom-editor"
                    style="height: 300px; width: 100%"
                   v-html="forms.goods_notice"
                  ></div>
                  </div>
                </el-form-item>
            </div>

              <!-- <div
                v-if="boboShow"
                ref="editorContainer2"
                @input="updateContent2"
                class="custom-editor"
                style="height: 300px"
                v-html="forms.goods_notice"
              ></div> -->
            </div>
            <div v-show="activeTab == 4">
              <el-form>
                <div>
                  <el-form-item label="购买数量" style="margin-left: 25px">
                    <el-radio-group v-model="radio6">
                      <el-radio :label="3">区间</el-radio>
                      <el-radio :label="6">自定义</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  
                  <div v-show="radio6 == 3" style="margin-left: 95px">
                    <el-input v-model="forms.start_count" style="width: 200px">
                      <template #append>-</template>
                    </el-input>
                    <el-input v-model="forms.end_count" style="width: 200px">
                    </el-input>
                  </div>
                  <div v-show="radio6 == 6">
                    <el-input v-model="forms.buy_times" style="width: 300px;margin-left: 94px;" />
                    <div class="numers" style="margin-left: 95px">
                      示例：如“1-5,10,20,30-35”表示购买数量为1,2,3,4,5,10,20,30,31,32,33,34,35
                    </div>
                  </div>
                  <el-form-item label="单人购买次数" style="margin-top: 20px;">
                    <el-input v-model="forms.buy_times" style="width: 200px">
                    </el-input>
                  </el-form-item>
                  <el-form-item label="质保天数开关" style="margin-left: 0px;">
                    <el-radio-group v-model="forms.validdate_flag">
                      <el-radio :label="1">开启</el-radio>
                      <el-radio :label="0">关闭</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item
                    label="质保天数"
                    v-show="forms.validdate_flag == 1"
                  >
                    <el-input
                      v-model="forms.validdate_value"
                      style="width: 200px"
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item label="余额限购" style="margin-left: 27px">
                    <el-input
                      v-model="forms.account_min_money"
                      style="width: 200px"
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item label="仅余额支付" style="margin-left: 12px">
                    <el-radio-group v-model="forms.open_account_pay">
                      <el-radio :label="1">开启</el-radio>
                      <el-radio :label="2">关闭</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item label="0元购" style="margin-left: 45px">
                    <el-radio-group v-model="forms.is_gratis">
                      <el-radio :label="1">开启</el-radio>
                      <el-radio :label="0">关闭</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  
                  <el-form-item label="强制跳转" style="margin-left: 25px">
                    <el-radio-group v-model="forms.goods_url_type">
                      <el-radio :label="1">开启</el-radio>
                      <el-radio :label="0">关闭</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  <el-form-item
                    label="跳转地址"
                    style="margin-left: 25px"
                    v-show="forms.goods_url_type == 1"
                  >
                    <el-input
                      v-model="forms.goods_url"
                      style="width: 200px"
                      @input="handleUrlInput"
                    ></el-input>

                    <!-- 错误提示 -->
                    <div
                      v-if="urlError"
                      style="color: #f56c6c; font-size: 12px; margin-top: 5px"
                    >
                      {{ urlError }}
                    </div>
                  </el-form-item>
                  <el-form-item label="充值网址" style="margin-left: 25px">
                    <el-input
                      v-model="forms.recharge_url"
                      style="width: 200px"
                      @input="handleUrlInput2"
                    ></el-input>

                    <!-- 错误提示 -->
                    <div
                      v-if="urlError2"
                      style="color: #f56c6c; font-size: 12px; margin-top: 5px"
                    >
                      {{ urlError2 }}
                    </div>
                  </el-form-item>
                  <el-form-item label="充值密码" style="margin-left: 25px">
                    <el-input v-model="forms.url_pwd" style="width: 200px">
                    </el-input>
                  </el-form-item>
                
                  <el-form-item label="限制策略" style="margin-left: 25px">
                    <el-select
                      v-model="forms.tactics_id"
                      class="m-2"
                      style="
                        position: relative;
                        margin-left: -1px;
                        top: -8px;
                        width: 205px;
                      "
                    >
                      <el-option
                        v-for="item in tacticslist"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>

                  <el-form-item label="可售渠道" style="margin-left: 25px">
                    <el-select
                      multiple
                      v-model="forms.allow_channels"
                      class="m-2"
                      style="
                        position: relative;
                        margin-left: -1px;
                        top: -8px;
                        width: 205px;
                      "
                    >
                      <el-option
                        v-for="item in allowchannels"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                  <el-form-item label="禁售渠道" style="margin-left: 25px">
                    <el-select
                      multiple
                      v-model="forms.fail_channels"
                      class="m-2"
                      style="
                        position: relative;
                        margin-left: -1px;
                        top: -8px;
                        width: 205px;
                      "
                    >
                      <el-option
                        v-for="item in allowchannels"
                        :key="item.value"
                        :label="item.name"
                        :value="item.value"
                      />
                    </el-select>
                  </el-form-item>
                </div>
              </el-form>
            </div>
          </div>
          <div class="area-footer">
            <el-button type="primary" @click="btnOne" v-show="xiayibuShow"
              >下一步</el-button
            >
            <el-button type="primary" @click="btnShang" v-show="activeTab !== 0"
              >上一步</el-button
            >
            <el-button type="primary" @click="btnbaocun">保存</el-button>
            <!-- <el-button type="primary">保存并存到下一商品</el-button> -->
          </div>
        </div>
      </div>
    </el-drawer>
    <!-- 图片预览对话框 -->
    <div class="image-overlay">
      <el-dialog v-model="imgShow" :show-close="false" width="36%">
        <img style="width: 100%" :src="currentImage" alt="" />
      </el-dialog>
    </div>

    <!-- 商品名称弹框 -->

    <el-dialog
      draggable
      v-model="shoppingShow"
      :title="titleName"
      :show-close="false"
      width="46%"
    >
      <div class="shop-conten">
        <div class="title-header" v-show="detailShow">
          <div class="guanjians">
            <div class="shop-detail" @click="shopinDetail">x</div>
            <div class="guanjian">关键字替换支持*号替换</div>
            <div class="guanjian">
              如名称为 测试123 测试13 输入 测试* 替换成 测试
            </div>
            <div class="guanjian">
              如名称为 测试啊 测试吧 输入 测试* 替换成 测试
            </div>
          </div>
        </div>
        <div class="shop-name">商品名称</div>
        <div style="margin-top: 12px">
          <el-input v-model="titleName" disabled />
        </div>
        <div style="margin-top: 12px">批量修改类型</div>
        <el-radio-group v-model="radioShop">
          <el-radio :label="1">修改名称</el-radio>
          <el-radio :label="2">替换名称</el-radio>
          <el-radio :label="3">添加前缀</el-radio>
          <el-radio :label="4">添加后缀</el-radio>
        </el-radio-group>
        <!--批量修改类型 -->
        <div style="margin-top: 12px" v-show="radioShop == '1'">
          <span>新商品名称</span>
          <el-input style="margin-top: 8px" v-model="piliang.goodsName" />
        </div>
        <!--关键字替换 -->
        <div v-show="radioShop == '2'">
          <div style="margin-top: 12px">
            <span>替换名称</span>
            <el-input style="margin-top: 8px" v-model="oldName" />
          </div>
          <div style="margin-top: 12px">
            <span>替换内容</span>
            <el-input style="margin-top: 8px" v-model="newName" />
          </div>
        </div>
        <!--关键字替换 -->
        <div v-show="radioShop == '3'">
          <div style="margin-top: 12px">
            <span>前缀</span>
            <el-input style="margin-top: 8px" v-model="prevName" />
          </div>
        </div>
        <div v-show="radioShop == '4'">
          <div style="margin-top: 12px">
            <span>后缀</span>
            <el-input style="margin-top: 8px" v-model="nextName" />
          </div>
        </div>

        <div style="display: flex; justify-content: center; margin-top: 32px">
          <el-button type="primary" @click="btnName1">提交</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 商品名称弹框 -->
    <el-dialog
      draggable
      v-model="typeShow"
      :title="titleName"
      :show-close="false"
      width="46%"
    >
      <div class="shop-conten">
        <div>
          <div>商品状态</div>
          <el-radio-group v-model="goodsStatuss" style="margin-top: 8px">
            <el-radio :label="1">销售</el-radio>
            <el-radio :label="2">暂停</el-radio>
            <el-radio :label="3">禁售</el-radio>
          </el-radio-group>
        </div>

        <div v-show="goodsStatuss == 2">
          <div style="margin-top: 12px">理由</div>
          <el-input
            :rows="2"
            type="textarea"
            style="margin-top: 8px"
            v-model="note"
            placeholder="请输入理由"
          />
        </div>
      </div>

      <div style="display: flex; justify-content: center; margin-top: 32px">
        <el-button type="primary" @click="btnName2">提交</el-button>
      </div>
    </el-dialog>

    <!-- 成本价弹框 -->
    <el-dialog
      draggable
      v-model="priceShow"
      title="查看默认销售"
      :show-close="false"
      width="46%"
    >
      <div class="shop-conten">
        <div style="margin-top: 12px">
          <span>商品面值:</span>
          <el-input v-model="titleName" class="price-input" />
        </div>

        <div style="margin-top: 12px">
          <span>真实成本:</span>
          <el-input v-model="titleName" class="price-input" />
        </div>

        <div style="margin-top: 12px">
          <span>定价成本:</span>
          <el-input v-model="titleName" class="price-input" />
        </div>

        <div style="margin-top: 12px">
          <div style="display: inline-block">定价类型</div>
          <el-radio-group
            class="dingjia-type"
            v-model="dingjia"
            @change="getRadio"
          >
            <el-radio :label="1">定价模版</el-radio>
            <el-radio :label="2">自定义模版</el-radio>
          </el-radio-group>
          <div v-show="radioShow == 1">
            <span>定价模块</span>
            <el-select
              v-model="value"
              style="margin-left: 15px"
              class="m-2"
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <span class="moban">新增模版</span>
            <el-table
              :data="tableData2"
              border
              style="width: 100%; margin-top: 12px"
            >
              <el-table-column prop="date" label="级别" align="center" />
              <el-table-column prop="name" label="售价" align="center" />
            </el-table>
          </div>
          <div v-show="radioShow == 2">
            <div style="margin-top: 20px">
              <span>自定义模版</span>
              <span style="margin-left: 30px">级别差价</span>
              <el-input
                v-model="input"
                style="width: 200px; margin-left: 12px"
              />
            </div>
            <div style="margin-left: 100px">
              <span>定价策略</span>
              <el-select
                v-model="value"
                class="m-2"
                placeholder="请选择"
                style="width: 232px"
              >
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </div>

            <div class="heng"></div>

            <div style="margin-top: 20px">
              <el-form
                ref="ruleFormRef"
                :model="ruleForm"
                :rules="rules"
                label-width="120px"
                class="demo-ruleForm"
                :size="formSize"
                status-icon
              >
                <el-form-item label="一级服务" prop="name">
                  <el-input v-model="ruleForm.name">
                    <template #append>元 + 商品销售价</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="尊贵铂金" prop="name2">
                  <el-input v-model="ruleForm.name2">
                    <template #append>元 + 商品销售价</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="荣耀黄金" prop="name3">
                  <el-input v-model="ruleForm.name3">
                    <template #append>元 + 商品销售价</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="秩序白银" prop="name4">
                  <el-input v-model="ruleForm.name4">
                    <template #append>元 + 商品销售价</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="普通会员" prop="name5">
                  <el-input v-model="ruleForm.name5">
                    <template #append>元 + 商品销售价</template>
                  </el-input>
                </el-form-item>
              </el-form>
            </div>
            <el-table
              :data="tableData2"
              border
              style="width: 100%; margin-top: 12px"
            >
              <el-table-column prop="date" label="级别" align="center" />
              <el-table-column prop="name" label="售价" align="center" />
            </el-table>
          </div>
        </div>
      </div>

      <div style="display: flex; justify-content: center; margin-top: 32px">
        <el-button type="primary" @click="priceOk" plain>取消</el-button>
        <el-button type="primary" @click="priceOk">确定</el-button>
      </div>
    </el-dialog>

    <!-- 商品销售 -->
    <el-dialog
      v-model="xiaoshouShow"
      :show-close="false"
      draggable
      title="商品售价"
      width="36%"
    >
      <el-table :data="pricelists3s" border style="width: 100%; margin-top: 12px">
        <el-table-column
                      prop="level"
                      label="级别"
                      align="center"
                    />
                    <el-table-column
                      prop="price"
                      label="售价"
                      align="center"
                    />
      </el-table>
    </el-dialog>

    <!-- 库存 -->
    <el-dialog
      v-model="kucunShow"
      :show-close="false"
      draggable
      title="设置商品库存"
      width="56%"
    >
      <el-button type="primary" @click="btnaddkucun" size="small"
        >添加库存</el-button
      >
      <el-button type="primary" @click="priceOk2" size="small"
        >同步进价</el-button
      >
      <span style="margin-left: 12px">权重从高到低下单</span>
      <el-switch style="margin-left: 12px" v-model="value1" />
      <span style="margin-left: 12px">成本从低到高下单</span>
      <el-select
        v-model="value3"
        style="width: 90px"
        class="m-2"
        placeholder="请选择"
        size="small"
      >
        <el-option
          v-for="item in options3"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <div style="margin-top: 12px">
        <el-table
          :data="tableData2"
          border
          style="width: 100%; margin-top: 12px"
        >
          <el-table-column
            prop="date"
            label="状态"
            align="center"
            #default="scope"
          >
            <el-switch v-model="scope.row.value" />
          </el-table-column>
          <el-table-column prop="name" label="渠道同步" align="center" />
          <el-table-column
            prop="name"
            label="关联库存"
            #default="scope"
            align="center"
            width="140"
          >
            <div style="display: flex">
              <div class="ziying">自营</div>
              <div class="kun-name">121212</div>
            </div>
          </el-table-column>
          <el-table-column
            prop="name"
            label="渠道商品ID"
            align="center"
            #default="scope"
          >
            <span style="color: #1890ff">111</span>
          </el-table-column>
          <el-table-column prop="name" label="类型" align="center" />
          <el-table-column prop="name" label="进价" align="center" />
          <el-table-column prop="name" label="库存" align="center" />
          <el-table-column prop="name" label="权重" align="center" />
          <el-table-column
            fixed="right"
            label="操作"
            width="120"
            align="center"
          >
            <template #default>
              <el-button link type="primary" size="small" @click="handleClick"
                >编辑</el-button
              >
              <el-button link type="primary" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>

    <!-- 添加库存 -->
    <el-dialog
      v-model="kucunShow2"
      :show-close="false"
      draggable
      title="添加库存"
      width="36%"
    >
      <div style="display: flex">
        <div>供货方式</div>
        <div class="tabs-kucun">
          <div
            class="bendi"
            v-for="(item, index) in tabnames"
            :key="index"
            :class="{ activeIndex: activeIndex == index }"
            @click="btnActiveindex(index)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>

      <div v-show="activeIndex == 0" style="margin-top: 22px">
        <div class="inputs">
          <span>库存名称</span>
          <el-input
            v-model="input"
            style="width: 220px; margin-left: 12px"
            placeholder="不填则默认"
          />
        </div>
        <div class="inputs" style="margin-left: 27px">
          <span>进价</span>
          <el-input
            v-model="input"
            style="width: 220px; margin-left: 12px"
            placeholder="不填则默认"
          >
            <template #append>元</template>
          </el-input>
        </div>
        <div class="inputs" style="margin-left: 27px">
          <span>库存</span>
          <el-input
            v-model="input"
            style="width: 220px; margin-left: 12px"
            placeholder="不填则默认"
          >
            <template #append>件</template>
          </el-input>
        </div>
        <div class="inputs" style="margin-left: 27px">
          <span>权重</span>
          <el-input
            v-model="input"
            style="width: 220px; margin-left: 12px"
            placeholder="不填则默认"
          />
        </div>
        <div class="inputs" style="margin-left: 27px">
          <span>状态</span>
          <el-switch style="margin-left: 12px" v-model="value1" />
        </div>
      </div>
      <div v-show="activeIndex == 1" style="margin-top: 22px">
        <div class="inputs">
          <span>库存名称</span>
          <el-input
            v-model="input"
            style="width: 220px; margin-left: 12px"
            placeholder="不填则默认"
          />
        </div>
        <div class="inputs">
          <span>本地卡库</span>
          <el-select
            v-model="value"
            class="m-2"
            placeholder="请选择"
            @change="getSelects"
            @clear="getclear"
            clearable
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-button
            @click="btnDao"
            v-show="selecShow"
            type="primary"
            :size="small"
            >导卡</el-button
          >
          <el-button
            v-show="selecShow"
            type="primary"
            :size="small"
            @click="btnkaisee"
            >查看</el-button
          >
        </div>
        <div class="selectname" v-show="selecShow">
          成本：10002.0000 ， 库存：4
        </div>
        <div class="inputs" style="margin-left: 27px">
          <span>权重</span>
          <el-input v-model="input" style="width: 220px; margin-left: 12px" />
        </div>
        <div class="inputs" style="margin-left: 27px">
          <span>状态</span>
          <el-switch style="margin-left: 12px" v-model="value1" />
        </div>
      </div>
      <div v-show="activeIndex == 2" style="margin-top: 22px">
        <div class="inputs">
          <span>库存名称</span>
          <el-input
            v-model="input"
            style="width: 220px; margin-left: 12px"
            placeholder="不填则默认"
          />
        </div>
        <div class="inputs">
          <span>货源渠道</span>
          <el-select
            v-model="value"
            class="m-2"
            placeholder="请选择"
            @change="getSelects"
            @clear="getclear"
            clearable
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="selectname" v-show="selecShow">
          成本：10002.0000 ， 库存：4
        </div>
        <div class="inputs" style="margin-left: 27px">
          <span>商品类型</span>
          <el-radio-group v-model="radio9" class="ml-4">
            <el-radio label="1" size="small">卡密</el-radio>
            <el-radio label="2" size="small">手工</el-radio>
          </el-radio-group>
        </div>
        <div class="inputs">
          <span>商品编号</span>
          <el-input v-model="input" style="width: 220px; margin-left: 12px" />
        </div>
        <div class="inputs" style="margin-left: 27px">
          <span>权重</span>
          <el-input v-model="input" style="width: 220px; margin-left: 12px" />
        </div>
        <div class="inputs" style="margin-left: 27px">
          <span>状态</span>
          <el-switch style="margin-left: 12px" v-model="value1" />
        </div>
      </div>
      <div class="kucun-footer">
        <el-button>取消</el-button>
        <el-button type="primary">继续添加</el-button>
        <el-button type="primary">保存</el-button>
      </div>
    </el-dialog>

    <!-- 导卡 -->
    <el-dialog
      v-model="daokaShow"
      :show-close="false"
      draggable
      title="导入卡密"
      width="46%"
    >
      <div style="display: flex">
        <div>卡密内容</div>
        <div>
          <el-input
            style="width: 400px; margin-left: 12px"
            v-model="textarea"
            :rows="9"
            type="textarea"
            placeholder="请输入卡密"
          />
        </div>
      </div>
      <div>
        <span>导入选项</span>
        <div class="daoru">
          <el-checkbox v-model="checked1">判断卡密重复</el-checkbox>
          <el-checkbox v-model="checked2">优先出售本批</el-checkbox>
          <el-checkbox v-model="checked3">商品置为销售</el-checkbox>
        </div>
      </div>
      <div class="cengben">
        <span>每张成本</span>
        <el-input v-model="input2" style="width: 300px; margin-left: 12px">
          <template #append>元</template>
        </el-input>
      </div>
      <div class="cengben">
        <span>过期时间</span>
        <el-date-picker
          style="margin-left: 12px; width: 300px"
          v-model="value1"
          type="datetime"
          placeholder="Select date and time"
        />
      </div>
      <div class="cengben">
        <span>导卡备注</span>
        <el-input v-model="input2" style="width: 300px; margin-left: 12px">
        </el-input>
      </div>
      <div class="kamiok">
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button @click="kamiClose">取消</el-button>
      </div>
    </el-dialog>

    <!-- 库存查看 -->
    <el-dialog
      v-model="kamiSee"
      :show-close="false"
      draggable
      title="查看卡密·三角洲"
      width="56%"
    >
      <el-select v-model="value" class="m-2" placeholder="请选择">
        <el-option
          v-for="item in seeDate"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input
        v-model="input"
        style="width: 200px; position: relative; left: -12px"
        placeholder="请输入"
      />
      <span>状态</span>
      <el-select
        v-model="value"
        style="width: 100px"
        class="m-2"
        placeholder="请选择"
      >
        <el-option
          v-for="item in xiaohouDate"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-button type="primary" @click="onSubmit">查询</el-button>
      <div style="margin-top: 12px">
        <el-button type="danger" plain @click="onSubmit">删除</el-button>
        <el-button type="danger" @click="onSubmit">清空</el-button>
        <el-button type="primary" plain @click="onSubmit">导出</el-button>
        <el-button type="primary" @click="onSubmit">复制卡密</el-button>
      </div>
      <el-table :data="tableData9" border style="width: 100%; margin-top: 12px">
        <el-table-column prop="date" label="卡号" align="center" />
        <el-table-column prop="name" label="密码" align="center" />
        <el-table-column prop="name" label="成不" align="center" />
        <el-table-column prop="name" label="导入时间" align="center" />
        <el-table-column prop="name" label="备注" align="center" />
        <el-table-column prop="name" label="状态" align="center" />
        <el-table-column prop="name" label="状态" align="center">
          <span>删除</span>
        </el-table-column>
      </el-table>
      <div class="footers-see">
        <el-pagination
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[100, 200, 300, 400]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-dialog>
    <!-- 批量分类 -->
    <el-dialog
      v-model="pifeiShow"
      :show-close="false"
      draggable
      title="批量分类"
      width="20%"
    >
      <div class="img-area">
    
        <el-tree-select
          v-model="piliangDate"
          style="width: 260px"
          multiple
          :data="dataList2"
          :render-after-expand="false"
          show-checkbox
          check-strictly
          check-on-click-node
        />
      
      </div>
      <div style="display: flex; justify-content: center; margin-top: 12px">
        <el-button type="primary" @click="btnpiliangfei">确定</el-button>
      </div>
    </el-dialog>
    <!-- 批量编辑商品 -->
    <el-dialog
      v-model="shangpingShow"
      :show-close="false"
      draggable
      title="编辑商品"
      width="56%"
    >
      <div class="img-area">
        <div class="img-arealeft">
          <el-form :model="formbatch" label-width="120px">
            <el-form-item label="商品名称">
              <el-input v-model="formbatch.goodsName" />
            </el-form-item>
            <el-form-item label="商品状态">
              <el-select
                v-model="formbatch.goodsStatus"
                class="selects"
                placeholder="请选择商品状态"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="成本价">
              <span class="bitian">*</span>
              <el-input v-model="formbatch.goodsPrice" />
            </el-form-item>
            <el-form-item label="图片" style="margin-top: 40px">
              <el-upload
                v-model:file-list="fileList"
                :http-request="httpRequest"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <el-icon><Plus /></el-icon>
              </el-upload>
            </el-form-item>

            <el-form-item label="分类">
              <el-select
                v-model="formbatch.goodsCategory"
                class="selects"
                placeholder="请选择分类"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="详情">
              <div class="editor-wrapper">
                <!-- 新增包裹容器 -->
                <div
                  ref="editorContainer"
                  class="custom-editor"
                  style="height: 300px; width: 300px"
                ></div>
              </div>
            </el-form-item>
            <el-form-item label="注意事项">
              <el-input
                type="textarea"
                placeholder="请输入注意事项"
                v-model="formbatch.goodsNote"
              />
            </el-form-item>
            <el-form-item label="充值url">
              <el-input
                placeholder="充值url"
                v-model="formbatch.goodsRechargeUrl"
              />
            </el-form-item>
            <el-form-item label="充值密码">
              <el-input
                placeholder="充值密码"
                v-model="formbatch.goodsRechargeUrlPwd"
              />
            </el-form-item>
            <el-form-item label="是否热门">
              <el-radio-group v-model="formbatch.goodsIsHot">
                <el-radio :label="3">是</el-radio>
                <el-radio :label="6">否</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item label="颜色">
              <div class="demo-color-block">
                <el-color-picker v-model="formbatch.goodsColor" />
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </el-dialog>
    <!-- 商品图片 -->
    <el-dialog
      v-model="shoppingimg"
      :show-close="false"
      draggable
      title="图片"
      width="56%"
    >
    <div class="img-area">
     
     <div class="img-right">
     <div>
       <el-button type="primary" @click="imgShows = true">图片上传</el-button>
       <!-- 修改条件：当selectedIndices不为空时显示 -->
       <el-button @click="imgsOk2" v-show="selectedIndices.length > 0">使用选中图片</el-button>
     </div>
     <div class="right-img">
       <div 
         class="rightimg-wrapper" 
         v-for="(item, index) in fileLists" 
         :key="index" 
         @click="toggleSelection2(index, item.url)"
       >
         <!-- 显示顺序号（仅在选中时） -->
         <div 
           v-if="selectedIndices.some(selected => selected.index === index)" 
           class="yuan" 
           style="left:55px"
         >
           {{ selectedIndices.find(selected => selected.index === index)?.order }}
         </div>
         <img 
           :class="{ 'img-selected': selectedIndices.some(selected => selected.index === index) }" 
           :src="item.url" 
           style="height: 120px; width: 120px" 
         />
       </div>
       
</div>

<!-- 分页组件 -->
<div class="pagination-container">
 <el-pagination
   style="margin-top: 30px"
   :current-page="pageImg"
   :page-size="limitImg"
   :total="total2"
   :page-sizes="[10, 20, 30, 50]"
   layout="total, sizes, prev, pager, next, jumper"
   @size-change="handlePageSizeChangeimg"
   @current-change="handleCurrentPageChangeimg"
 />
</div>
</div>

   </div>
    </el-dialog>
    <!-- 批量上传图片 -->
    <el-dialog
      v-model="piImgshow"
      :show-close="false"
      draggable
      title="批量上传图片"
      width="56%"
    >
      <div class="img-area2">
        <div style="margin-top: 9px">
          <div class="imgList">
            <div
              class="imgs2"
              v-for="(item, index) in selectedIndices2"
              :key="index"
            >
              <img
                class="imgs2"
                @click="openImagePreview(item)"
                :src="item"
                alt=""
              />
              <span class="img-xx" @click="closeImg(index)">x</span>
            </div>
            <div class="tutu" @click="imgOks">
              <el-icon><Plus /></el-icon>
            </div>
          </div>

          <!-- <el-upload
              class="avatar-uploader"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
            </el-upload> -->
          <div class="shangchuan" @click="pilaing">
            <el-button type="primary">确定</el-button>
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 商品图片之上传图片 -->
    <el-dialog
      v-model="shoppingimg2"
      :show-close="false"
      draggable
      title="上传图片"
      width="56%"
    >
      <div class="img-area2">
        <div style="margin-top: 9px">
          <el-upload
            v-model:file-list="fileList"
            class="upload-demo"
            :http-request="httpRequest"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :on-success="handleUploadSuccess"
            list-type="picture"
          >
            <el-button type="primary">点击上传图片</el-button>
          </el-upload>
          <div class="shangchuan" @click="btnshangchuan">
            <el-button type="primary">确定</el-button>
          </div>
        </div>
      </div>
    </el-dialog>

    <!-- 商品视频 -->
    <el-dialog
      v-model="shoppingVdieo"
      :show-close="false"
      draggable
      title="视频"
      width="56%"
    >
      <div class="img-area">
        <div class="img-arealeft">
          <el-input v-model="input2" placeholder="请输入分类名称">
            <template #append>
              <div>
                <el-button :icon="Search" />
              </div>
            </template>
          </el-input>
        </div>
        <div class="img-arearight">
          <el-button @click="btnShangVideo">上传视频</el-button>
          <el-button disabled="true">删除视频</el-button>
          <div class="zanwu">暂无视频</div>
        </div>
      </div>
    </el-dialog>
    <!-- 商品视频之上传视频 -->
    <el-dialog
      v-model="shoppingVideo2"
      :show-close="false"
      draggable
      title="上传视频"
      width="56%"
    >
      <div class="img-area2">
        <div style="margin-top: 9px">
          <span>视频链接</span>
          <el-input
            v-model="forms.goods_video"
            style="width: 200px; margin-left: 30px"
            placeholder="请输入视频链接"
          />
          <el-button
            type="primary"
            @click="btnshiping"
            style="margin-left: 20px"
            >确认添加</el-button
          >
        </div>
        <div style="display: flex; justify-content: end">
          <el-button @click="shoppingVideo2 == false">取消</el-button>
          <el-button type="primary">确定</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 定价模版新增 -->
    <el-dialog
      v-model="mobanShow"
      :show-close="false"
      draggable
      title="添加"
      width="56%"
    >
      <div class="img-area">
        <div>
          <div class="jibies">
            <el-form-item label="级别差价">
              <el-input v-model="input2" style="width: 500px" />
            </el-form-item>
          </div>
          <div class="jibies">
            <el-form-item label="定价策略">
              <el-select
                v-model="value5"
                style="width: 232px; position: relative; top: -3px"
                class="m-2"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in dingjiaList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </div>
          <div class="jibies">
            <el-form-item label="一级服务商">
              <el-input v-model="input2" style="width: 470px">
                <template #append>元 + 商品销售价</template>
              </el-input>
            </el-form-item>
          </div>
          <div class="jibies">
            <el-form-item label="尊贵铂金">
              <el-input v-model="input2" style="width: 470px">
                <template #append>元 + 商品销售价</template>
              </el-input>
            </el-form-item>
          </div>
          <div class="jibies">
            <el-form-item label="荣耀黄金">
              <el-input v-model="input2" style="width: 470px">
                <template #append>元 + 商品销售价</template>
              </el-input>
            </el-form-item>
          </div>
          <div class="jibies">
            <el-form-item label="秩序白银">
              <el-input v-model="input2" style="width: 470px">
                <template #append>元 + 商品销售价</template>
              </el-input>
            </el-form-item>
          </div>
          <div class="jibies">
            <el-form-item label="普通会员">
              <el-input v-model="input2" style="width: 470px">
                <template #append>元 + 商品销售价</template>
              </el-input>
            </el-form-item>
          </div>
        </div>
      </div>
      <div style="display: flex; justify-self: center">
        <el-button type="primary" plain @click="mobanClose">取消</el-button>
        <el-button type="primary">保存</el-button>
      </div>
    </el-dialog>
    <!-- 批量策略 -->
    <el-dialog
      v-model="tidShow"
      :show-close="false"
      draggable
      title="批量策略"
      width="36%"
    >
      <el-select v-model="tids" class="m-2">
        <el-option
          v-for="item in tidDate"
          :key="item.value"
          :label="item.title"
          :value="item.value"
        />
      </el-select>

      <div style="display: flex; justify-self: center">
        <el-button type="primary" @click="btnTid">保存</el-button>
      </div>
    </el-dialog>
    <!-- 批量可售渠道 -->
    <el-dialog
      v-model="keshouShow"
      :show-close="false"
      draggable
      title="批量可售渠道"
      width="36%"
    >
      <el-select v-model="allow_channels" multiple class="m-2">
        <el-option
          v-for="item in keshouDate"
          :key="item.value"
          :label="item.name"
          :value="item.value"
        />
      </el-select>

      <div style="display: flex; justify-self: center">
        <el-button type="primary" @click="btnkeshou">保存</el-button>
      </div>
    </el-dialog>
    <!-- 批量設置禁用渠道 -->
    <el-dialog
      v-model="jinyongShow"
      :show-close="false"
      draggable
      title="批量禁售渠道"
      width="36%"
    >
      <el-select v-model="fail_channels" multiple class="m-2">
        <el-option
            
          v-for="item in keshouDate"
          :key="item.value"
          :label="item.name"
          :value="item.value"
        />
      </el-select>

      <div style="display: flex; justify-self: center">
        <el-button type="primary" @click="btnjingyong">保存</el-button>
      </div>
    </el-dialog>
    <!-- 批量修改余额支付 -->
    <el-dialog
      v-model="openaccountpayShow"
      :show-close="false"
      draggable
      title="批量修改余额支付开关"
      width="36%"
    >
      <div class="img-area">
        <div>
          <div class="jibies">
            <el-form-item label="">
              <el-switch v-model="openaccountpays" />
            </el-form-item>
          </div>
        </div>
      </div>
      <div style="display: flex; justify-self: center">
        <el-button type="primary" @click="btnopenaccountpay">保存</el-button>
      </div>
    </el-dialog>

        <!-- 批量修改销量 -->
        <el-dialog
      v-model="numberShow"
      :show-close="false"
      draggable
      title="批量修改数量"
      width="36%"
    >
      <div class="img-area">
        <div>
          <div class="jibies">
            <el-form>
                <div>
                  <el-form-item label="购买数量" style="margin-left: 25px">
                    <el-radio-group v-model="radio6">
                      <el-radio :label="3">区间</el-radio>
                    
                    </el-radio-group>
                  </el-form-item>
                  
                  <div v-show="radio6 == 3" style="margin-left: 95px">
                    <el-input v-model="start_count" style="width: 200px">
                      <template #append>-</template>
                    </el-input>
                    <el-input v-model="end_count" style="width: 200px">
                    </el-input>
                  </div>
                  <div v-show="radio6 == 6">
                    <el-input v-model="forms.buy_times" style="width: 300px;margin-left: 94px;" />
                    <div class="numers" style="margin-left: 95px">
                      示例：如“1-5,10,20,30-35”表示购买数量为1,2,3,4,5,10,20,30,31,32,33,34,35
                    </div>
                  </div>
                
                </div>
              </el-form>
          </div>
        </div>
      </div>
      <div style="display: flex; justify-self: center;margin-top: 16px;" >
        <el-button type="primary" @click="btnordercount2">保存</el-button>
      </div>
    </el-dialog>

    <!-- 批量修改销量 -->
    <el-dialog
      v-model="ordercountShow"
      :show-close="false"
      draggable
      title="批量修改销量"
      width="36%"
    >
      <div class="img-area">
        <div>
          <div class="jibies">
            <el-form-item label="修改销量">
              <el-input v-model="ordercount" style="width: 500px" />
            </el-form-item>
          </div>
        </div>
      </div>
      <div style="display: flex; justify-self: center">
        <el-button type="primary" @click="btnordercount">保存</el-button>
      </div>
    </el-dialog>
    <!-- 批量修改余额数量 -->
    <el-dialog
      v-model="accountminmoneyShow"
      :show-close="false"
      draggable
      title="批量修改余额限购"
      width="36%"
    >
      <div class="img-area">
        <div>
          <div class="jibies">
            <el-form-item label="余额限购">
              <el-input v-model="accountminmoney" style="width: 500px" />
            </el-form-item>
          </div>
        </div>
      </div>
      <div style="display: flex; justify-self: center">
        <el-button type="primary" @click="btnaccountminmoney">保存</el-button>
      </div>
    </el-dialog>
    <!-- 定价模版新增 -->
    <el-dialog
      v-model="shangpingShow1"
      :show-close="false"
      draggable
      title="批量修改商品名称"
      width="36%"
    >
      <div class="img-area">
        <div>
          <div class="title-header" v-show="detailShow">
            <div class="guanjians">
              <div class="shop-detail" @click="shopinDetail">x</div>
              <div class="guanjian">关键字替换支持*号替换</div>
              <div class="guanjian">
                如名称为 测试123 测试13 输入 测试* 替换成 测试
              </div>
              <div class="guanjian">
                如名称为 测试啊 测试吧 输入 测试* 替换成 测试
              </div>
            </div>
          </div>
          <div class="jibies">
            <div>
              <el-radio-group v-model="changeType">
                <el-radio :label="1">修改名称</el-radio>
                <el-radio :label="2">替换名称</el-radio>
                <el-radio :label="3">添加前缀</el-radio>
                <el-radio :label="4">添加后缀</el-radio>
              </el-radio-group>
            </div>
            <el-form-item label="商品名称" v-if="changeType == 1">
              <el-input v-model="piliang.goodsName" style="width: 500px" />
            </el-form-item>
            <el-form-item label="替换名称" v-if="changeType == 2">
              <el-input v-model="oldName" style="width: 500px" />
            </el-form-item>
            <el-form-item label="替换内容" v-if="changeType == 2">
              <el-input v-model="newName" style="width: 500px" />
            </el-form-item>
            <el-form-item label="添加前缀" v-if="changeType == 3">
              <el-input v-model="prevName" style="width: 500px" />
            </el-form-item>
            <el-form-item label="添加后缀" v-if="changeType == 4">
              <el-input v-model="nextName" style="width: 500px" />
            </el-form-item>
          </div>
        </div>
      </div>
      <div style="display: flex; justify-self: center">
        <el-button type="primary" @click="btnName1">保存</el-button>
      </div>
    </el-dialog>
    <!-- 商品状态 -->
    <el-dialog
      v-model="shangpingShow2"
      :show-close="false"
      draggable
      title="批量修改商品状态"
      width="36%"
    >
      <div class="img-area">
        <div>
          <div class="jibies">
            <el-form-item label="商品状态">
              <el-radio-group v-model="goodsStatuss">
                <el-radio :label="1"
                  >销售
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="上架可见可下单"
                    placement="top-start"
                  >
                    <el-icon
                      style="
                        position: relative;
                        top: 2px;
                        color: rgb(24, 144, 255);
                      "
                      ><Warning
                    /></el-icon> </el-tooltip
                ></el-radio>
                <el-radio :label="2"
                  >暂停
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="上架可见不可下单"
                    placement="top-start"
                  >
                    <el-icon
                      style="
                        position: relative;
                        top: 2px;
                        color: rgb(24, 144, 255);
                      "
                      ><Warning
                    /></el-icon>
                  </el-tooltip>
                </el-radio>
                <el-radio :label="3"
                  >禁售
                  <el-tooltip
                    class="box-item"
                    effect="dark"
                    content="上架不可见不可下单"
                    placement="top-start"
                  >
                    <el-icon
                      style="
                        position: relative;
                        top: 2px;
                        color: rgb(24, 144, 255);
                      "
                      ><Warning
                    /></el-icon>
                  </el-tooltip>
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <el-input
            v-show="goodsStatuss == 2"
            v-model="note"
            :rows="2"
            type="textarea"
            placeholder="请输入暂停理由"
          />
        </div>
      </div>
      <div style="display: flex; justify-self: center; margin-top: 12px">
        <el-button type="primary" @click="btnName2">保存</el-button>
      </div>
    </el-dialog>
    <!-- 上传图片 -->
    <el-dialog
      v-model="imgShows"
      :show-close="false"
      draggable
      title="上传图片"
      width="30%"
    >
      <div class="img-area">
        <div>
          <div class="jibies">
            <el-form-item label="上传方式">
              <el-radio-group v-model="imgdias">
                <el-radio :label="1">本地上传</el-radio>
                <el-radio :label="2">网络上传</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="上传图片" v-show="imgdias == 1">
            <el-upload
             
              ref="uploadRef"
              v-model:file-list="localFiles"
              multiple
              :auto-upload="false"
              :limit="20"
              list-type="picture-card"
              :before-upload="beforeUpload"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <el-icon><Plus /></el-icon>
              <template #tip>
                <div class="el-upload__tip">
                  支持jpg/png文件，单张不超过5MB
                </div>
              </template>
            </el-upload>
          </el-form-item>
            <el-form-item label="网络图片" v-show="imgdias == 2">
              <el-input
                style="width: 300px"
                v-model="textarea2"
              
               
              />
            </el-form-item>
          </div>
        </div>
      </div>
      <div style="display: flex; justify-self: center">
        <el-button type="primary" @click="handleConfirmUpload" v-show="imgdias ==1">确认111</el-button>
        <el-button type="primary" v-show="imgdias==2"  @click="pilaing2">确认</el-button>
      </div>
    </el-dialog>
    <!-- 批量修改成本价 -->
    <el-dialog
      v-model="goodsPriceShow"
      :show-close="false"
      draggable
      title="批量修改定价成本"
      width="36%"
    >
      <div class="img-area">
        <div>
          <div class="jibies">
            <el-form-item label="商品状态">
              <el-radio-group v-model="goodsPrice">
                <el-radio :label="1">销售</el-radio>
                <el-radio :label="2">暂停</el-radio>
                <el-radio :label="3">禁售</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </div>
      </div>
      <div style="display: flex; justify-self: center">
        <el-button type="primary" @click="btngoodsPriceShow">保存</el-button>
      </div>
    </el-dialog>
    <!-- 批量修改注意事项 -->
    <el-dialog
      v-model="shangpingShow3"
      :show-close="false"
      draggable
      title="批量修改注意事项"
      width="56%"
    >
    <div>
      <el-button type="primary"  v-show="state.piliangHtmlShow" @click="btnkeshihua">可视化界面</el-button>
          <el-input
          style="margin-top: 12px; height: 300px;border: 1 solid;"
          v-model="piliangHtmls"
          v-show="state.piliangHtmlShow"
          type="textarea"

            
          />
        </div>
      <div class="img-area">
       


        <div v-show="!state.piliangHtmlShow">
          <el-form-item label="">
            <div class="editor-wrapper">
              <!-- 新增包裹容器 -->
              <div
                ref="editorContainers"
                @input="getshixiang"
                class="custom-editor"
                style="height: 300px; width: 100%"
                 v-if="!state.piliangHtmlShow"
                v-html="goodsNote"
              ></div>
            </div>
          </el-form-item>
        </div>
      </div>
      <div style="display: flex; justify-self: center;margin-top:20px;">
        <el-button type="primary" @click="btnName3">保存</el-button>
      </div>
    </el-dialog>
    <!-- 批量修改富文本 -->
    <el-dialog
      v-model="goodsInfoShow"
      :show-close="false"
      draggable
      title="批量修改商品详情"
      width="56%"
    >
    <div>
      <el-button type="primary"  v-show="piliangHtmlShow2" @click="btnkeshihua2">可视化界面</el-button>
          <el-input
           style="margin-top: 12px;"
            v-model="piliangHtmls2"
            v-show="piliangHtmlShow2"
            :autosize="{ minRows: 2, maxRows: 4 }"
            type="textarea"
            
          />
        </div>
      <div class="img-area">
        <div v-show="!piliangHtmlShow2">
          <el-form-item label="">
            <div class="editor-wrapper">
              <!-- 新增包裹容器 -->
              <div
                ref="richTextEditor"
                @input="getshixiang2"
                class="custom-editor"
                style="height: 300px; width: 100%"
                v-html="goodsNote2"
              ></div>
            </div>
          </el-form-item>
        </div>
      </div>
      <div style="display: flex; justify-self: center">
        <el-button type="primary" @click="btngoodsInfo">保存</el-button>
      </div>
    </el-dialog>
    <!-- 可购范文 -->
    <el-dialog
      v-model="shangpingShow6"
      :show-close="false"
      draggable
      title="批量修改商品可购范围"
      width="36%"
    >
      <div class="img-area">
        <div>
          <div class="jibies">
            <el-form-item label="可购范围最少">
              <el-input v-model="piliang.goodsPayStart" style="width: 500px" />
            </el-form-item>
            <el-form-item label="可购范围最多">
              <el-input v-model="piliang.goodsPayEnd" style="width: 500px" />
            </el-form-item>
          </div>
        </div>
      </div>
      <div style="display: flex; justify-self: center">
        <el-button type="primary" @click="btnName6">保存</el-button>
      </div>
    </el-dialog>
    <!-- 可购范文 -->
    <el-dialog
      v-model="shangpingShow7"
      :show-close="false"
      draggable
      title="批量修改商品充值地址"
      width="36%"
    >
      <div class="img-area">
        <div>
          <div class="jibies">
            <el-form-item label="商品充值地址">
              <el-input
                v-model="piliang.goodsRechargeUrl"
                style="width: 300px"
              />
            </el-form-item>
            <el-form-item label="密码" style="margin-left: 30px">
              <el-input
                v-model="piliang.goodsRechargeUrlPwd"
                style="width: 300px"
              />
            </el-form-item>
          </div>
        </div>
      </div>
      <div style="display: flex; justify-self: center">
        <el-button type="primary" @click="btnName7">保存</el-button>
      </div>
    </el-dialog>
    <!-- 颜色 -->
    <el-dialog
      v-model="shangpingShow9"
      :show-close="false"
      draggable
      title="批量修改颜色"
      width="36%"
    >
      <div class="img-area">
        <div>
          <div class="jibies">
            <el-form-item label="颜色">
              <el-color-picker v-model="piliang.goodsColor" />
            </el-form-item>
          </div>
        </div>
      </div>
      <div style="display: flex; justify-self: center">
        <el-button type="primary" @click="btnName9">保存</el-button>
      </div>
    </el-dialog>
    <!-- 热门 -->
    <el-dialog
      v-model="shangpingShow9s"
      :show-close="false"
      draggable
      title="批量修改商品热门"
      width="36%"
    >
      <div class="img-area">
        <div>
          <div class="jibies">
            <el-form-item label="热门">
              <el-radio-group v-model="piliang.goodsIsHot">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
        </div>
      </div>
      <div style="display: flex; justify-self: center">
        <el-button type="primary" @click="btnName9s">保存</el-button>
      </div>
    </el-dialog>
    <!-- 成本价 -->
    <el-dialog
      v-model="shangpingShow9ss"
      :show-close="false"
      draggable
      title="批量修改成本价"
      width="36%"
    >
      <div class="img-area">
        <div>
          <div class="jibies">
            
            <el-form-item label="成本价">
              <el-input v-model="piliang.goodsPrice" style="width: 500px" />
            </el-form-item>
          </div>
        </div>
      </div>
      <div style="display: flex; justify-self: center">
        <el-button type="primary" @click="btnName9ss">保存</el-button>
      </div>
    </el-dialog>
      <!-- 批量定价 -->
      <el-dialog
      v-model="piliangdiangjia"
      :show-close="false"
      draggable
      title="批量修改定价"
      width="20%"
    >
      <div class="img-area">
        <div>
          <div class="jibies">
            <el-form-item label="修改定价">
              <el-select v-model="id2" class="m-2" >
                  <el-option
                    v-for="item in piliangdingjia"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
            </el-form-item>
          </div>
        </div>
      </div>
      <div style="display: flex; justify-self: center">
        <el-button type="primary" @click="btnEdintdingjia">保存</el-button>
      </div>
    </el-dialog>
    <!-- 批量修改图片 -->
    <el-dialog
      v-model="pingImgs"
      :show-close="false"
      draggable
      title="图片"
      width="66%"
    >
      <div class="img-area">
        <div class="img-right">
          <div>
            <el-button type="primary" @click="btnimgShows"
              >图片上传</el-button
            >

            <el-button @click="imgsOk" v-show="selectedIndices2.length > 0"
              >使用选中图片</el-button
            >
          </div>
          <div class="right-img">
            <div
              class="rightimg-wrapper"
              v-for="(item, index) in fileLists"
              :key="index"
              @click="toggleSelection(index, item.url)"
            >
              <!-- 点击时才显示数字圆标 -->
              <div
                class="yuan"
                v-if="
                  selectedIndices.some((selected) => selected.index === index)
                "
              >
                {{
                  selectedIndices.find((selected) => selected.index === index)
                    ?.order
                }}
              </div>

              <!-- 图片选中样式 -->
              <img
                class="rightimg"
                :class="{
                  imgActive: selectedIndices.some(
                    (selected) => selected.index === index
                  ),
                }"
                :src="item.url"
                style="height: 120px; width: 120px"
              />
            </div>
          </div>

          <div class="pagination-container">
            <el-pagination
              style="margin-top: 30px"
              :current-page="pageImg"
              :page-size="limitImg"
              :total="total2"
              :page-sizes="[10, 20, 30, 50]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="handlePageSizeChangeimg"
              @current-change="handleCurrentPageChangeimg"
            />
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 批量修改图片2 -->
    <el-dialog
      v-model="pingImgs2"
      :show-close="false"
      draggable
      title="图片"
      width="66%"
    >
      <div class="img-area">
     
        <div class="img-right">
        <div>
          <el-button type="primary" @click="imgShows = true">图片上传</el-button>
          <!-- 修改条件：当selectedIndices不为空时显示 -->
          <el-button @click="imgsOk2" v-show="selectedIndices.length > 0">使用选中图片</el-button>
        </div>
        <div class="right-img">
          <div 
            class="rightimg-wrapper" 
            v-for="(item, index) in fileLists" 
            :key="index" 
            @click="toggleSelection2(index, item.url)"
          >
            <!-- 显示顺序号（仅在选中时） -->
            <div 
              v-if="selectedIndices.some(selected => selected.index === index)" 
              class="yuan" 
              style="left:55px"
            >
              {{ selectedIndices.find(selected => selected.index === index)?.order }}
            </div>
            <img 
              :class="{ 'img-selected': selectedIndices.some(selected => selected.index === index) }" 
              :src="item.url" 
              style="height: 120px; width: 120px" 
            />
          </div>
  </div>

  <!-- 分页组件 -->
  <div class="pagination-container">
    <el-pagination
      style="margin-top: 30px"
      :current-page="pageImg"
      :page-size="limitImg"
      :total="total2"
      :page-sizes="[10, 20, 30, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      @size-change="handlePageSizeChangeimg"
      @current-change="handleCurrentPageChangeimg"
    />
  </div>
</div>

      </div>
    </el-dialog>
    <!-- 商品分类 -->
    <el-dialog
      v-model="shangpingShow4"
      :show-close="false"
      draggable
      title="批量修改商品分类"
      width="60%"
    >
      <div class="addfen">
        <el-button type="primary" size="small">新增</el-button>
      </div>
      <div class="img-area">
        <div style="position: relative; left: 46px; margin-top: 33px">
          <div class="jibies">
            <el-table
              :data="fenleiDate"
              style="width: 100%; margin-bottom: 20px"
              row-key="id"
              border
              default-expand-all
            >
              <el-table-column prop="name" label="分类名称" align="center" />
              <el-table-column prop="info" label="分类介绍" align="center" />
              <el-table-column prop="color" label="分类颜色" align="center" />
              <el-table-column prop="status" label="分类状态" align="center" />
              <el-table-column prop="sort" label="排序" align="center" />
              <el-table-column
                prop="img"
                label="分类图标"
                #default="scope"
                align="center"
              >
                <img
                  style="width: 100%; cursor: pointer"
                  :src="scope.row.img"
                  alt=""
                  @click="openImagePreview(scope.row.ime)"
                />
                <el-icon v-if="!scope.row.img" :size="30"><Picture /></el-icon>
              </el-table-column>
              <el-table-column prop="istop" label="热门" align="center" />
              <el-table-column
                label="操作"
                #default="scope"
                width="260"
                align="center"
              >
                <el-button type="primary" size="small">二级分类</el-button>
                <el-button type="primary" size="small" plain>编辑</el-button>
                <el-button type="danger" size="small">删除</el-button>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div style="display: flex; justify-self: center">
        <el-button type="primary" @click="btnName9ss">保存</el-button>
      </div>
    </el-dialog>


      <!-- 批量加价模版 -->
      <el-dialog
      v-model="jiajiaShow"
      :show-close="false"
      draggable
      title="批量修改加价模版"
      width="27%"
    >
     
      <div class="img-area">
        <div style="position: relative; left: 46px; margin-top: 33px">
          <div class="jibies">
            <el-table
              :data="dengjiList"
              style="width: 100%; margin-bottom: 20px"
            
              border
             @selection-change="handleSelectionChange2"
            >
            <el-table-column type="selection" width="55" />
            <el-table-column prop="value" label="ID" align="center" />
              <el-table-column prop="lable" label="级别" align="center" />
              <el-table-column prop="price" label="售价" align="center"  #default="scope">
            
                <el-input v-model=" scope.row.price" />
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div style="display: flex; justify-self: center">
        <el-button type="primary" @click="banJiajia">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
// 导入字体

import type { UploadProps } from "element-plus";
import Sortable from "sortablejs";
import Quill from "quill";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.snow.css"; // 引入样式
import { watch } from "vue";
import { Search } from "@element-plus/icons-vue";
import {
  delGoodsForIds,
  editGoodsImgsForIds,
  goodsInfo,
  goodsSave,
  getParentList,
  getOrderList,
  editGoodsPriceForIds,
  editGoodsIsHotForIds,
  editGoodsColorForIds,
  editGoodsRechargeForIds,
  editGoodsStartEndForIds,
  editGoodsNoteForIds,
  setGoodsSort,
  editGoodsNameForIds,
  editGoodsStatusForIds,
  goodsRecommendSet,
  editGoodsCategoryForIds,
  editGoodsNeedMyAccountMinFree,
  editGoodsOrderCountForIds,
  editGoodsNeedMyAccountFree,
  getTacticsList,
  editTactics,
  uploads,
  editGoodsAllowChannelsForIds,
  editGoodsFailChannelsForIds,
  getUploadFiles,
  userLevelList,
  savePriceLIst,
  getPlanList,
  getOneGoodsLevelPrice,
  getCategorize,
  getDockList,
  setSort
} from "~/base/api/product/productList.ts";
import {
  UploadFilled,
  Delete,
  Plus,
  ZoomIn,
  Warning,
  PictureFilled,
  ArrowDown,
  Picture,
  CopyDocument,
  Top,
  Upload,
  Download,
  Bottom,
} from "@element-plus/icons-vue";
import { getOrderList2 } from "~/base/api/product/productList.ts";
import { reactive, ref, onMounted, nextTick } from "vue";
import axios from "axios";
import { Loading } from "@element-plus/icons-vue";
import { ElMessageBox, ElMessage, ElLoading } from "element-plus";
import item from "@/layouts/components/menu/item";
import { assign } from "lodash-es";
import { draw } from "radash";
import { constantOtherSymbol } from "ace-builds/src-noconflict/mode-ruby_highlight_rules";
const shopDisable = ref(true);

const dingjiaInput = ref("");
const dingjiaInputs = ref("1");
const textarea2 = ref("");
const piliangdiangjia=ref(false)
const laiyuan = ref("");
const qudaoList=ref([])
const dockId=ref("")
const id2=ref("")
const piliangdingjia=ref([])
const laiyuanShow = ref(false);
const boboShow = ref(false);
const docklist = ref([]);
const jiajiaShow=ref(false)
const dingjiaList = ref([
  {
    value: "1",
    lable: "金额累加",
  },
  {
    value: "2",
    lable: "百分比累加",
  },
]);
// const moreName = ref("");
const goods_name=ref("")
const forms = reactive({
  stock_num: "",
  docking_goods_id: "",
  goods_video: "",
  docking_id: "",
  goods_type: 1,
  goods_short_name: "",
  goods_name_color: "#000",
  goods_imgs: "",
  face_value: "",
  cost_value: "",
  goods_price_renew_type: 1,
  priceName_id: "",
  start_count: 1,
  end_count: 100,
  buy_times: 0,
  goods_name: "",
  id: "",
  category_ids: [],
  template_type_id: "",
  validdate_flag: 0,
  validdate_value: 0,
  tactics_id: 0,
  open_account_pay: 2,
  account_min_money: 0,
  allow_channels: [],
  fail_channels: [],
  level_price_list: [],
  is_gratis: 0,
  goods_url_type: 0,
  url_pwd: "",
  buy_times:"",
  goods_url: "",
  recharge_url: "",
  goods_info: "",
  goods_notice: "", //注意事项
});
const names = ref(0);
const start_count=ref('')
const end_count=ref("")
const imgDate = ref([]);
const radio9 = ref("");
const fileLists2 = ref([]);
const fenleiDate = ref([]);
const shangpingShow4 = ref(false);
const mobanShow = ref(false);
const shangpingShow = ref(false);
const pifeiShow = ref(false);
const shangpingShow2 = ref(false);
const changeType = ref(1);
const shangpingShow1 = ref(false);
const shangpingShow3 = ref(false);
const shangpingShow7 = ref(false);
const numberShow=ref(false)
const shangpingShow9 = ref(false);
const shangpingShow9s = ref(false);
const shangpingShow9ss = ref(false);
const imgdias = ref(1);
const piImg = ref("");
const oldName = ref("");
const newName = ref("");
const nextName = ref("");
const goodsPriceShow = ref(false);
const pricetpllist = ref([]);
const categorylist = ref([]);
let toolbarConfig = {
  //需求是只要三个（颜色、加粗、项目符号）
  toolbarKeys: [
    // 菜单 key
    "headerSelect",

    // 菜单 key
    "bold",
    "bulletedList",
  ],
  insertKeys: {
    index: 1, // 插入的位置，基于当前的 toolbarKeys
    keys: ["color"],
  },

  excludeKeys: ["headerSelect"],
};
// 内容配置
let editorConfig = ref({
  placeholder: "请输入正文内容",
  readOnly: false, // 是否只读，默认 false
  autoFocus: true, // 是否focus， 默认 true
  scroll: true, // 是否支持滚动，默认true。不要固定 editor-container 的高度，设置一个 min-height 即可。
  maxLength: 200, // 最高内容长度，onMaxLength 当达到限制时，触发函数
  // 可选择的颜色是
  MENU_CONF: {
    color: {
      colors: ["black", "red", "orange", "green", "blue"],
    },
  },
});

function richOver(val: any) {
  // 内容
  console.log(val);
  content.value = val;
}
const dengjiList=ref([])
const disableds = ref(true);
const xiangqingcc=ref(true)
const tabslistss = ref([]);
const imgsList = ref([]);
const imgsListId = ref([]);
const imgsListId2 = ref([]);
const goodsImgs = ref("");
const jinyongShow = ref(false);
const fail_channels = ref([]);
const tabslistss2 = ref("");
const disabledShow = ref(true);
const goodsNote = ref("");
const goodsNote2 = ref("");
const goodsPrice = ref("");
const pageImg = ref(1);
const limitImg = ref(20);
const imgShows = ref(false);
const note = ref("");

const piliang = reactive({
  goodsName: "",
  goodsStatus: "",
  goodsNote: "",
  goodsPayStart: "",
  goodsPayEnd: "",
  goodsRechargeUrl: "",
  goodsRechargeUrlPwd: "",
  goodsColor: "",
  goodsIsHot: "",
  goodsPrice: "",
});
const xiaohouDate = ref([
  {
    value: "1",
    label: "待售",
  },
  {
    value: "2",
    label: "已售",
  },
]);
const pricelists2 = ref([]);
const pricelists3 = ref([]);
const selecShow = ref(false);
const value3 = ref("");
const value5=ref('1')
const activeIndex = ref(0);
const tpllists = ref([]);
const value1 = ref(true);
const kamiSee = ref(false);
const daokaShow = ref(false);
const pricelists = ref([]);
const quillInstance = ref(null);
const quillInstance2 = ref(null);
const quillInstances = ref(null);
const localFiles=ref([])
const goodsStatuss = ref("");

const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
const tabnames = ref([
  {
    name: "本地供货",
  },
  {
    name: "本地卡库",
  },
  {
    name: "货源渠道",
  },
]);
const formbatch = reactive({
  goodsName: "",
  ids: "",
  goodsStatus: "",
  goodsPrice: "",
  goodsImgs: "",
  goodsCategory: "",
  goodsInfo: "",
  goodsNote: "",
  goodsPayStart: "",
  goodsPayEnd: "",
  goodsRechargeUrl: "",
  goodsRechargeUrlPwd: "",
  goodsIsHot: "",
  goodsColor: "",
});
const kucunShow2 = ref(false);
const xiaoshouShow = ref(false);
const imgActive = ref(-1);
const for_user=ref("")
const dock_goods_id=ref("")
const provide_type=ref("")
const newShopping = ref("");
const editorContainer = ref("");
const editorContainershixiang = ref("");
const editorContainers = ref("");
const richTextEditor=ref("")
const editorContainer4 = ref("");
const tacticslist = ref([]);

const piliangHtmls=ref("")
const piliangHtmls2=ref("")
const piliangHtmls3=ref("")
const piliangHtmls4=ref("")
const piliangHtmlShow=ref(false)
const piliangHtmlShow2=ref(false)
const piliangHtmlShow3=ref(false)
const piliangHtmlShow4=ref(false)
const switchName = ref("");
const ordercount = ref("");
const ordercountShow = ref(false);
const openaccountpayShow = ref(false);
const openaccountpay = ref("");
const kucunShow = ref(false);
const radioShop = ref(1);
const titleName = ref("");
const shopinput = ref("");
const guanjian1 = ref("");
const heShow=ref(true)
const guanjian2 = ref("");
const qianzuis = ref("");
const qianzuis2 = ref("");
const imgShow = ref(false);
const priceShow = ref(false);
const goodsInfoShow = ref(false);
const allow_channels = ref([]);
const tidDate = ref([]);
const keshouDate = ref([
  { name: "咸鱼", value: "1" },
  { name: "拼多多", value: "2" },
  { name: "淘宝", value: "3" },
  { name: "京东", value: "4" },
  { name: "抖音快手", value: "5" },
  { name: "小红书", value: "6" },
  { name: "其他渠道", value: "7" },
  { name: "API", value: "8" },
]);
const dingjia = ref("1");
const activeType = ref("");
const accountminmoneyShow = ref(false);
const pingImgs = ref(false);
const input3 = ref("");
const accountminmoney = ref("");
const editor = ref(null);
const goodsTypes=ref(0)
const typeList = ref([
  {
    id: 1,
    name: "卡密商品",
    name1: "自动发货",
  },
  {
    id: 2,
    name: "充值商品",
    name1: "充值商品",
  },
  {
    id: 3,
    name: "实物商品",
    name1: "物流发货",
  },
  {
    id: 4,
    name: "29wk",
    name1: "自动充值",
  },
]);
const seeDate = ref([
  {
    value: "1",
    label: "密码",
  },
  {
    value: "2",
    label: "卡号",
  },
]);
const options3 = [
  {
    value: "1",
    label: "按最低进价定价",
  },
  {
    value: "2",
    label: "按最好进价定价",
  },
  {
    value: "3",
    label: "按第二高进价定价",
  },
];
const piImgshow = ref(false);
const ruleForm = reactive({
  name: "",
  name2: "",
  name3: "",
  name4: "",
  name5: "",
});
const editorContent2 = ref(null);
const rules = reactive({
  name: [{ required: true, message: "值不能为空", trigger: "blur" }],
  name2: [{ required: true, message: "值不能为空", trigger: "blur" }],
  name3: [{ required: true, message: "值不能为空", trigger: "blur" }],
  name4: [{ required: true, message: "值不能为空", trigger: "blur" }],
  name5: [{ required: true, message: "值不能为空", trigger: "blur" }],
});
const tableRef = ref<HTMLElement | null>(null);
const zhuangtai = ref(true);
const zhuangtaishixiang = ref(true);
const zhuangtaishixiang2 = ref(true);
// 图片预览相关状态
const previewVisible = ref(false);
const laiyuansShow = ref(false);
const daokaShow2 = ref(false);
const currentImage = ref("");
const shoppingShow = ref(false);
const drawer = ref(false);
const tabname = ref(0);
const props2 = ref({ multiple: true });
const activeTab = ref(0);
const tabsListAcitive = ref(0);
const tableData3 = ref([]);
const tableData4 = ref([]);
const tableData5 = ref([]);
const fileLists = ref([]);
const tableData9 = ref([]);
const tableData6 = ref([]);
const moreDate = ref([
  {
    value: "商品信息",
    label: "商品信息",
    children: [
      {
        value: "商品名称",
        label: "商品名称",
      },
      {
        value: "商品图片",
        label: "商品图片",
      },
      {
        value: "商品状态",
        label: "商品状态",
      },
      {
        value: "商品分类",
        label: "商品分类",
      },
      {
        value: "推荐商品",
        label: "推荐商品",
      },
      {
        value: "商品热门",
        label: "商品热门",
      },
      {
        value: "商品颜色",
        label: "商品颜色",
      },
      {
        value: "商品详情",
        label: "商品详情",
      },
      {
        value: "商品注意事项",
        label: "商品注意事项",
      },
    ],
  },
  {
    value: "商品价格",
    label: "商品价格",
    children: [
      {
        value: "加价模版",
        label: "加价模版",
      },
      {
        value: "批量定价",
        label: "批量定价",
      },
      {
        value: "定价成本",
        label: "定价成本",
      },
    ],
  },
  {
    value: "商品配置",
    label: "商品配置",
    children: [
  
    
      {
        value: "余额限购",
        label: "余额限购",
      },
      {
        value: "仅余额支付",
        label: "仅余额支付",
      },
      {
        value: "限购策略",
        label: "限购策略",
      },
      {
        value: "可售渠道",
        label: "可售渠道",
      },
      {
        value: "禁售渠道",
        label: "禁售渠道",
      },
      // {
      //   value: "初始销量",
      //   label: "初始销量",
      // },
      {
        value: "充值地址",
        label: "充值地址",
      },
      {
        value: "购买数量",
        label: "购买数量",
      },
      {
        value: "设置销量",
        label: "设置销量",
      },
    ],
  },
]);
const childBorder = ref(false);
const options2 = [
  {
    value: "Option1",
    label: "Option1",
  },
  {
    value: "Option2",
    label: "Option2",
  },
  {
    value: "Option3",
    label: "Option3",
  },
  {
    value: "Option4",
    label: "Option4",
  },
  {
    value: "Option5",
    label: "Option5",
  },
];
const qianzui = ref("");
const tableData2 = [
  {
    date: "一级服务商",
    name: "2020.5",
  },
  {
    date: "尊贵铂金",
    name: "20006.02",
  },
  {
    date: "荣耀黄金",
    name: "2009.3",
  },
];
const tabsList = ref([
  {
    name: "基本信息",
  },
  {
    name: "库存管理",
  },
  {
    name: "商品详情",
  },
  {
    name: "注意事项",
  },
  {
    name: "商品配置",
  },
]);
const radioType = ref("");
const editorContent = ref("");
const detailShow = ref(true);
const openaccountpays = ref(false);
const ordersn = ref("");
const typeShow = ref(false);
const liyou = ref("");
const tidShow = ref(false);
const radioShow = ref(1);
const tabslists = ref([]);
const shoppingimg3 = ref(false);
const allowchannels = ref([]);
const shoppingVideo2 = ref(false);
const prevName = ref("");
const keshouShow = ref(false);
const radio2 = ref(3);
const shangpingShow6 = ref(false);
const quillInstance3=ref("")
const quillInstance4=ref("")
onBeforeUnmount(() => {
  if (quillInstance2.value?.destroy) {
    quillInstance2.value.destroy();
  }
  if (quillInstance3.value?.destroy) {
    quillInstance3.value.destroy();
  }
  if (quillInstance4.value?.destroy) {
    quillInstance4.value.destroy();
  }

});

//最顶部
function btntop(e) {
  console.log("111", e);
  let parm = {
    id: e.id,
    key: "top",
  };

  setGoodsSort(parm).then((res) => {
    if (res.code == 200) {
      getSetdocking();
      ElMessage({
        message: "操作成功",
        type: "success",
      });
    }
  });
}
//上一级
function btnup(e) {
  console.log("111", e);
  let parm = {
    id: e.id,
    key: "up",
  };

  setGoodsSort(parm).then((res) => {
    if (res.code == 200) {
      getSetdocking();
      ElMessage({
        message: "操作成功",
        type: "success",
      });
    }
  });
}
//下一级
function btndown(e) {
  let parm = {
    id: e.id,
    key: "down",
  };

  setGoodsSort(parm).then((res) => {
    if (res.code == 200) {
      getSetdocking();
      ElMessage({
        message: "操作成功",
        type: "success",
      });
    }
  });
}
//选择来源类型
const heShow2 =ref(true)
const heShow3=ref(true)
function getchange(e){
 console.log(e)
if(e == 5){
  heShow2.value=false
  heShow3.value=false
}else{
  heShow2.value=true
  heShow3.value=true
}

if(e ==8){
  heShow2.value=false
}else{
  heShow2.value=true
}

}
//置地
function btnfoot(e) {
  let parm = {
    id: e.id,
    key: "foot",
  };

  setGoodsSort(parm).then((res) => {
    if (res.code == 200) {
      getSetdocking();
      ElMessage({
        message: "操作成功",
        type: "success",
      });
    }
  });
}
//初始化编辑器
const initEditor = (containerRef, content, instanceRef) => {
  if (!containerRef.value) {
    console.error("编辑器容器未找到!");
    return;
  }

  // 销毁旧实例
  if (instanceRef) {
    instanceRef.destroy();
    instanceRef = null;
  }

  // 创建新实例
  try {
    instanceRef = new Quill(containerRef.value, {
      theme: "snow",
      modules: {
        toolbar: [
          [{ header: [1, 2, false] }],
          ["bold", "italic", "underline"],
          ["link", "image"],
        ],
        container: [
          // ... 其他工具栏按钮
          { "custom-color": ["red", "green", "blue", "yellow", "purple"] }, // 这里写你想要的颜色
          // 或者使用一个自定义的按钮容器
        ],
      },
    });

    // 设置内容
    if (content) {
      instanceRef.root.innerHTML = content;
    }

    // 监听变化事件
    instanceRef.on("text-change", () => {
      // 更新对应的响应式数据
      if (containerRef === editorContainer) {
        editorContent.value = instanceRef.root.innerHTML;
      } else if (containerRef === editorContainer4) {
        editorContent2.value = instanceRef.root.innerHTML;
      }
    });

    return instanceRef;
  } catch (e) {
    console.error("编辑器初始化失败:", e);
  }
};
const tidList = ref([]);
const tids = ref("");

//批量分类多选
const piliangtabslists = ref([]);
const piliangDate = ref("");

const dataList2 = ref([]);
//批量分类列表
function getSetdocking2() {
  // 显示 loading
  const loadingInstance = ElLoading.service({
    target: ".el-dialog", // 针对对话框区域
    lock: true,
    text: "正在加载数据中...",
    background: "rgba(0, 0, 0, 0.7)",
  });
  let parm = {
    page: currentPage.value,
    limit: pageSize.value,
  };
  getOrderList2(parm).then((res) => {
    if (res.code == 200) {
      dataList2.value = res.data.data;
      for (let item of dataList2.value) {
        if (item.status == 1) {
          item.status = true;
        } else {
          item.status = false;
        }
        if (item.istop == 1) {
          item.istop = true;
        } else {
          item.istop = false;
        }
      }
    }
  });
}

//列表图片选择
// 数据定义
const selectedIndices = ref([]);  // 存储选中的图片信息
const listimgs = ref("");         // 选中的图片URL集合

// 图片选中/取消逻辑
const toggleSelection2 = (index, url) => {
  const existingIndex = selectedIndices.value.findIndex(
    item => item.index === index
  );

  if (existingIndex === -1) {
    // 计算下一个顺序号
    const nextOrder = selectedIndices.value.length > 0 
      ? Math.max(...selectedIndices.value.map(item => item.order)) + 1
      : 1;
    
    selectedIndices.value.push({ 
      index, 
      url, 
      order: nextOrder 
    });
  } else {
    // 移除选中项
    selectedIndices.value.splice(existingIndex, 1);
    
    // 重新排序剩余项的顺序号
    selectedIndices.value = selectedIndices.value.map((item, i) => ({
      ...item,
      order: i + 1
    }));
  }

  // 更新选中的图片URL列表（逗号分隔）
  listimgs.value = selectedIndices.value
    .sort((a, b) => a.order - b.order)
    .map(item => item.url)
    .join(",");
};


//图片选择

const selectedIndices2 = ref([]);
function toggleSelection(index, e) {
  if (selectedIndices2.value.includes(e)) {
    selectedIndices2.value = selectedIndices2.value.filter((i) => i !== e);
  } else {
    selectedIndices2.value.push(e);
  }
  console.log("图片", selectedIndices2.value);

  const item = fileLists.value[index];
  const existingItem = selectedIndices.value.find(
    (selected) => selected.index === index
  );

  if (existingItem) {
    // 如果已选中，取消选中并重新计算后续顺序号
    selectedIndices.value = selectedIndices.value
      .filter((selected) => selected.index !== index)
      .map((selected, i) => ({ ...selected, order: i + 1 })); // 重置剩余项的 order
  } else {
    // 如果未选中，添加并赋予当前顺序号（最大值 +1）
    const nextOrder =
      selectedIndices.value.length > 0
        ? Math.max(...selectedIndices.value.map((item) => item.order)) + 1
        : 1;
    selectedIndices.value.push({
      index,
      order: nextOrder,
      url: item.url, // 可选
    });
  }

  console.log("当前选中顺序：", selectedIndices.value);
}

//去掉选择的图片
function closeImg(e) {
  selectedIndices2.value.splice(e, 1);
}
//打开图片弹框
function imgOks() {
  pingImgs.value = true;
}
//图片取消弹框
function imgsOk() {
  pingImgs.value = false;
}

const imgcc = ref(1);


const imgsOk2 = async () => {
  if (selectedIndices.value.length === 0) {
    ElMessage.warning("请至少选择一张图片");
    return;
  }

  const targetId = lieimg.value || tabslistss2.value;
  // if (!targetId) {
  //   ElMessage.error("必须指定目标商品");
  //   return;
  // }
  pingImgs2.value=false
  // 查找目标商品索引
  const targetIndex = dataList.value.findIndex(
    item => String(item.goods_attment_face_id) === String(targetId) || 
           String(item.id) === String(targetId)
  );

  if (targetIndex === -1) {
    ElMessage.error("未找到对应商品");
    return;
  }

  try {
    // 获取选中的多张图片 URL（按选择顺序）
    const newImageUrls = selectedIndices.value
      .sort((a, b) => a.order - b.order) // 按顺序号排序
      .map(item => item.url);

    // 更新数据（第一张图设为face_id，其余拼接到goods_imgs）
    dataList.value[targetIndex] = {
      ...dataList.value[targetIndex],
      goods_attment_face_id: newImageUrls[0],
      goods_imgs: newImageUrls.join(",")
    };

    ElMessage.success("图片批量替换成功");
  } catch (err) {
    console.error("替换失败:", err);
    ElMessage.error("图片替换失败");
  } finally {
    // 重置状态
    selectedIndices.value = [];
    lieimg.value = "";
    tabslistss2.value = "";
  }
};











//图片分页
function handlePageSizeChangeimg(e) {
  selectedIndices.value = [];
  selectedIndices2.value = [];
  limitImg.value = e;
  getimg();
}
function handleCurrentPageChangeimg(e) {
  selectedIndices.value = [];
  selectedIndices2.value = [];
  pageImg.value = e;
  getimg();
}


//获取图片
function getimg() {
  let parm = {
    page: pageImg.value,
    limit: limitImg.value,
  };

  getUploadFiles(parm).then((res) => {
   
    fileLists.value = res.data;
    total2.value = parseInt(res.count);
    
  });
}
const shangpingFenDate=ref([])
//获取等级列表
function getuserLevelList(){
  userLevelList().then((res)=>{
  
    dengjiList.value=res.data
  })
}

const handleCheck = (checkedKeys, { checkedNodes }) => {
  // checkedNodes 是完整的节点对象数组
  checkedNodes.forEach(node => {
    console.log('当前节点value:', scid.value);
    
    // 获取父级value（通过parent指针）
    console.log('父级value:', node.parent?.value || '无父节点');
    
    // 获取子级value列表（如果有子节点）
    if (node.children) {
      console.log('子级value列表:', node.children.map(c => c.value));
    }
  });
};


//获取商品分类列表
function getCategorizes(){
  getCategorize().then((res)=>{
    shangpingFenDate.value=res.data
    categorylist.value=res.data
  
  })
}
//获取渠道下拉
function getDockLists(){
  getDockList().then((res)=>{
    console.log('渠道',res)
    qudaoList.value=res.data

    
  })
}
//初始化
onMounted(() => {
  getCategorizes()
  getPlanLists()
  goodsInfos();
  getimg();
  getParentLists();
  getDockLists()
  getSetdocking2();
  setTimeout(() => {
  
    // initQuill();
    // initQuill2();
    editorContainer.value = "";
    editorContainer4.value = "";
   
  }, 2000);
  getSetdocking();

  nextTick(() => {
    // initQuill();
    // initQuill2();
    initSortableTable();
  });
  // 初始化拖拽功能
  function initSortableTable() {
    if (!tableRef.value) return;

    const tbody = tableRef.value.$el.querySelector(
      ".el-table__body-wrapper tbody"
    );

    if (tbody) {
      Sortable.create(tbody, {
        animation: 150, // 动画速度
        handle: ".drag-handle", // 只能用指定的手柄拖动
        ghostClass: "sortable-ghost", // 拖拽时的虚影样式
        chosenClass: "sortable-chosen", // 被选中的样式
        dragClass: "sortable-drag", // 拖拽中的样式
        onEnd: (evt: any) => {
          // 拖拽结束时更新数据顺序
          const oldIndex = evt.oldIndex;
          const newIndex = evt.newIndex;
          const targetRow = dataList.value.splice(oldIndex, 1)[0];
          dataList.value.splice(newIndex, 0, targetRow);
          console.log("拖拽后的数据顺序:", dataList.value);
          let cc = [];
          const ids2 = ref("");
          for (let item of dataList.value) {
            cc.push(item.id);
          }
          ids2.value = cc.join(",");

          console.log(cc, cc.join(","));
          setSort({ id: ids2.value }).then((res) => {
            if (res.code == 200) {
              getSetdocking();
            }
          });
          // 调用API保存新顺序 (可选)
          // saveNewOrder(dataList.value)
        },
      });
    }
  }
});
//获取一级分类
function getParentLists() {
  getParentList().then((res) => {
    fenleiDate.value = res.data;
    for (let item of fenleiDate.value) {
      if (item.status == 1) {
        item.status = "正常";
      } else if (item.status == 0) {
        item.status = "下架";
      }
    }
  });
}
//打开成本价
function btnNames9ss() {
  shangpingShow9ss.value = true;
  piliang.goodsPrice = "";
}
//保存成本价
function btnName9ss() {
  let parm = {
    goodsPrice: piliang.goodsPrice,
    ids: tabslistss2.value,
  };
  editGoodsPriceForIds(parm).then((res) => {
    console.log("res", res);
    if (res.code == 200) {
      shangpingShow9ss.value = false;
      getSetdocking();
      ElMessage({
        message: res.msg,
        type: "success",
      });
    }
  });
}
//打开热门
function btnNames9s() {
  shangpingShow9s.value = true;
  piliang.goodsIsHot = "";
}
//保存热门
function btnName9s() {
  if(piliang.goodsIsHot==''){
    ElMessage({
      message: "商品热门不能为空",
      type: "error",
    });
    return
  }
  let parm = {
    goodsIsHot: piliang.goodsIsHot,
    ids: tabslistss2.value,
  };
  editGoodsIsHotForIds(parm).then((res) => {
    console.log("res", res);
    if (res.code == 200) {
      shangpingShow9s.value = false;
      getSetdocking();
      ElMessage({
        message: res.msg,
        type: "success",
      });
    }
  });
}
//打开颜色
function btnNames9() {
  shangpingShow9.value = true;
  piliang.goodsColor = "";
}
//保存颜色
function btnName9() {
  if(piliang.goodsColor == ''){
    ElMessage({
      message: "颜色不能为空",
      type: "error",
    });
    return
  }
  let parm = {
    goodsColor: piliang.goodsColor,
    ids: tabslistss2.value,
  };
  editGoodsColorForIds(parm).then((res) => {
    console.log("res", res);
    if (res.code == 200) {
      shangpingShow9.value = false;
      getSetdocking();
      ElMessage({
        message: res.msg,
        type: "success",
      });
    }
  });
}
//打开充值地址和密码
function btnNames7() {
  shangpingShow7.value = true;
  piliang.goodsRechargeUrl = "";
  piliang.goodsRechargeUrlPwd = "";
}
//保存批量修改充值地址和密码
function btnName7() {
  if ( piliang.goodsRechargeUrl== "" && piliang.goodsRechargeUrlPwd== '' ) {
    ElMessage({
      message: "数据不能为空",
      type: "error",
    });
    return;
  }
  let parm = {
    goodsPayStart: piliang.goodsRechargeUrl,
    goodsPayEnd: piliang.goodsRechargeUrlPwd,
    ids: tabslistss2.value,
  };
  editGoodsRechargeForIds(parm).then((res) => {
    if (res.code == 200) {
      shangpingShow7.value = false;
      getSetdocking();
      ElMessage({
        message: res.msg,
        type: "success",
      });
    }
    console.log("res", res);
  });
}
//确定添加视频
function btnshiping() {
  shoppingVideo2.value = false;
}
const docking_id = ref("");
//获取渠道id
function qudaoSelect(e) {
  docking_id.value = e;
}
const laiyuans = ref("");

//初始化编辑器

// ... 其他代码 ...
const quillInstanceDetail = ref<Quill | null>(null);
const quillInstanceNotice = ref<Quill | null>(null);

// 初始化Quill编辑器
const initQuillEditor = (key: string, containerRef: any, content: string) => {
  try {
    // 确保容器存在
    if (!containerRef.value) {
      console.error(`${key}编辑器容器未找到!`);
      return;
    }

    // 销毁旧实例
    if (key === "goods_info" && quillInstanceDetail.value) {
      quillInstanceDetail.value.destroy();
    }
    if (key === "goods_notice" && quillInstanceNotice.value) {
      quillInstanceNotice.value.destroy();
    }

    // 确保容器可见
    if (containerRef.value.offsetHeight === 0) {
      console.warn(`${key}编辑器容器不可见，延迟初始化`);
      setTimeout(() => initQuillEditor(key, containerRef, content), 100);
      return;
    }

    // 创建新实例
    const quill = new Quill(containerRef.value, {
      theme: "snow",
      modules: {
        toolbar: [
          ["bold", "italic", "underline"],
          ["blockquote", "code-block"],
          [{ header: 1 }, { header: 2 }],
          [{ list: "ordered" }, { list: "bullet" }],
          ["link", "image"],
        ],
      },
    });

    // 设置内容
    quill.root.innerHTML = content;

    // 监听变化
    quill.on("text-change", () => {
      if (key === "goods_info") {
        forms.goods_info = quill.root.innerHTML;
      } else {
        forms.goods_notice = quill.root.innerHTML;
      }
    });

    // 保存引用
    if (key === "goods_info") {
      quillInstanceDetail.value = quill;
    } else {
      quillInstanceNotice.value = quill;
    }

    console.log(`${key}编辑器初始化成功`);
  } catch (error) {
    console.error(`${key}编辑器初始化失败:`, error);
    // 开发环境显示更详细信息
    if (process.env.NODE_ENV === "development") {
      console.error(
        "容器状态:",
        containerRef.value
          ? {
              offsetHeight: containerRef.value.offsetHeight,
              display: getComputedStyle(containerRef.value).display,
              visibility: getComputedStyle(containerRef.value).visibility,
            }
          : "容器未定义"
      );
    }
  }
};

const openDrawer = () => {
  drawer.value = true;

  // 等待抽屉DOM完全渲染
  setTimeout(() => {
    // 确保容器存在且是DOM元素
    if (editorContainer.value && editorContainer.value instanceof Element) {
      initQuillEditor(editorContainer, forms.goods_info, (html) => {
        forms.goods_info = html;
      });
    } else {
      console.error("editorContainer不可用:", editorContainer.value);
    }

    if (editorContainer4.value && editorContainer4.value instanceof Element) {
      initQuillEditor(editorContainer4, forms.goods_notice, (html) => {
        forms.goods_notice = html;
      });
    } else {
      console.error("editorContainer2不可用:", editorContainer4.value);
    }
  }, 3000); // 适当延迟确保DOM渲染
};

const isDrawerReady = ref(false); // 新增标志位

// 集中初始化编辑器
const initEditors = () => {
  // 检查容器是否可用
  const isContainerReady = (ref) => ref.value && ref.value instanceof Element;

  // 初始化商品详情编辑器
  if (isContainerReady(editorContainer)) {
    initQuillEditor(
      editorContainer,
      forms.goods_info || "<p>商品详情</p>",
      (html) => (forms.goods_info = html)
    );
  } else {
    console.error("商品详情编辑器容器无效", editorContainer.value);
  }

  // 初始化注意事项编辑器
  if (isContainerReady(editorContainer4)) {
    initQuillEditor(
      editorContainer4,
      forms.goods_notice || "<p>注意事项</p>",
      (html) => (forms.goods_notice = html)
    );
  } else {
    console.error("注意事项编辑器容器无效", editorContainer4.value);
  }
};
// 创建基于MutationObserver的初始化控制器
const initEditorGuard = (containerRef, content, callback) => {
  const MAX_ATTEMPTS = 10;
  let attempts = 0;

  const observer = new MutationObserver(() => {
    attempts++;

    // 有效元素检查（关键！）
    const isElementValid =
      containerRef.value &&
      containerRef.value instanceof HTMLElement &&
      containerRef.value.offsetHeight > 0 &&
      getComputedStyle(containerRef.value).display !== "none";

    if (isElementValid) {
      observer.disconnect();
      initQuillEditor(containerRef, content, callback);
      return;
    }

    // 超出最大尝试次数
    if (attempts >= MAX_ATTEMPTS) {
      observer.disconnect();
      console.error(`无法初始化编辑器: ${containerRef.value}`);
    }
  });

  // 监控整个文档及容器自身属性变化
  observer.observe(document.body, {
    subtree: true,
    childList: true,
    attributes: true,
    attributeFilter: ["style", "class"],
  });

  // 额外监控容器元素
  if (containerRef.value) {
    observer.observe(containerRef.value, {
      attributes: true,
      attributeFilter: ["style", "class"],
    });
  }

  // 设置超时保险
  const timer = setTimeout(() => {
    observer.disconnect();
    if (containerRef.value) {
      initQuillEditor(containerRef, content, callback);
    } else {
      console.error("初始化超时: 容器未找到");
    }
  }, 3000); // 3秒超时

  // 清理函数
  return () => {
    observer.disconnect();
    clearTimeout(timer);
  };
};

//编辑查看详情
const shangjia=ref(false)
function btnEdint(e) {
  drawer.value = true;
  if (drawer.value == true) {
    goodsInfo({ id: e.id }).then((res) => {
      console.log('编辑查看详情',res)
      provide_type.value = res.data.goods_info.provide_type;
      console.log("判断库存管理", provide_type.value);
if (provide_type.value == 1) {
  shangjia.value=false
  goodsTypes.value=Number(res.data.goods_info.goods_type)
  console.log('商品类型',goodsTypes.value)
  // 当docking_id既不是null也不是0（即有效值）时
  if (res.data.goods_info.docking_id !== null &&res.data.goods_info.docking_id !== 0 ) {
    qudaoName.value = false;
    laiyuanShow.value = true;
    laiyuan.value = "渠道";
  } else {
    // docking_id为null或者0
    laiyuan.value = "自营";
    qudaoName.value = true;
    laiyuanShow.value = false;
    console.log(
      "等于空或0走这边",
      res.data.goods_info.docking_id,
      res.data.goods_info.goods_type
    );
    if (res.data.goods_info.goods_type == 1) {
      console.log("等于1才走这边");
      daokaShow2.value = true;
      laiyuansShow.value = false;
    } else {
      console.log("不等于1走这边");
      daokaShow2.value = false;
      laiyuansShow.value = true;
    }
  }
} else if (provide_type.value == 2) {
  laiyuan.value = "比较通";
  shangjia.value=true
} else if (provide_type.value == 3) {
  laiyuan.value = "一键通";
  shangjia.value=true
} else if (provide_type.value == 4) {
  shangjia.value=true
  laiyuan.value = "平台间对接";
} else if (provide_type.value == 5) {
   shangjia.value=true
  laiyuan.value = "商家供货";
}

      forms.stock_num = res.data.goods_info.stock_num;
      forms.docking_goods_id = res.data.goods_info.docking_goods_id;
      forms.goods_info = res.data.goods_info.goods_info;
      forms.account_min_money = res.data.goods_info.account_min_money;
      forms.goods_notice = res.data.goods_info.goods_notice;
      activeTab.value = 0;
  
      docklist.value = res.data.dock_list;

      forms.id = res.data.goods_info.id;
      forms.docking_id = res.data.goods_info.docking_id;
      forms.level_price_list = [];
      dingjiaInput.value = "";
      dingjiaInputs.value = "1";
      pricetpllist.value = res.data.price_tpl_list;
      tpllists.value = res.data.tpl_list;
      forms.template_type_id=res.data.goods_info.template_type_id
      pricelists.value = res.data.tpl_list;
      tacticslist.value = res.data.tactics_list;
      allowchannels.value = res.data.allow_channels;
      forms.priceName_id = res.data.goods_info.pricename_id;
      forms.is_gratis = res.data.goods_info.is_gratis;
      imgDate.value = [];
      // goodsimgss.value=res.data.goods_info.goods_imgs

      // const imgArray = goodsimgss.value.split(',').map(url => url.trim()).filter(Boolean);
      // const isMultiple = imgArray.length > 1;
      // console.log(isMultiple ? "多张图片" : "单张图片")
     if( res.data.goods_info.goods_imgs){
      const goods_imgs = res.data.goods_info.goods_imgs;
      const imgArray = goods_imgs.split(",");
      // 2. 过滤空值并统计数量
      const imgCount = imgArray.filter((url) => url.trim() !== "").length;
      console.log(`共有 ${imgCount} 个图片地址`, imgArray); // 输出：共有 2 个图片地址
      if (imgCount > 1) {
        for (let item of imgArray) {
          imgDate.value.push({ url: item });
        }
        console.log("有多个图片", imgDate.value);
      } else {
        console.log("只有一个图片");

        imgDate.value.push({ url: res.data.goods_info.goods_imgs });
      }
     }
     

      activeType.value = res.data.goods_info.goods_type;
      forms.goods_url_type = res.data.goods_info.goods_url_type;
      pricelists2.value = res.data.goods_info.price_list;
      pricelists3.value = res.data.goods_info.price_list;
      forms.goods_video = res.data.goods_info.goods_video;
      forms.goods_name = res.data.goods_info.goods_name;
      forms.goods_type = res.data.goods_info.goods_type;
      if (forms.goods_type == 1) {
        activeType.value = 0;
      } else if (forms.goods_type == 2) {
        activeType.value = 1;
      } else if (forms.goods_type == 3) {
        activeType.value = 2;
      } else if (forms.goods_type == 4) {
        activeType.value = 3;
      }
      forms.goods_short_name = res.data.goods_info.goods_short_name;
      forms.goods_imgs = res.data.goods_info.goods_imgs;
      forms.face_value = res.data.goods_info.face_value;
      forms.cost_value = res.data.goods_info.cost_value;
      forms.goods_name_color = res.data.goods_info.goods_name_color;
      forms.goods_price_renew_type = 2;

      forms.start_count = res.data.goods_info.start_count;
      forms.end_count = res.data.goods_info.end_count;
      forms.buy_times = res.data.goods_info.buy_times;
      forms.id = res.data.goods_info.id;
      forms.category_ids = res.data.goods_info.category_ids;

      forms.allow_channels = res.data.goods_info.allow_channels;
     
      forms.fail_channels = res.data.goods_info.fail_channels;
      forms.url_pwd = res.data.goods_info.url_pwd;
      forms.buy_times=res.data.goods_info.buy_times
      forms.goods_url = res.data.goods_info.goods_url;
      forms.recharge_url = res.data.goods_info.recharge_url;
      for (let item of pricetpllist.value) {
        item.pricePrice = 0;
      }

      if (zhuangtai.value == true) {
        nextTick(() => {
          initQuill();
          initQuill2();
          console.log(
            "nextTick 后容器状态:",
            editorContainer.value,
            "ssdsdsdsdsdsd",
            editorContainer.value.innerHTML
          ); // 调试点
        });
        zhuangtai.value = false;
      } else {
        console.log("走这边");
      }
    
    });
    
  }
}

const isDrawerOpened = ref(false);

const urlError = ref("");
function handleUrlInput(val) {
  if (!val) {
    urlError.value = "";
  } else if (!/^(https?:\/\/)/.test(val)) {
    urlError.value = "URL必须以 http:// 或 https:// 开头";
  } else {
    urlError.value = "";
  }
}
const urlError2 = ref("");
function handleUrlInput2(val) {
  if (!val) {
    urlError2.value = "";
  } else if (!/^(https?:\/\/)/.test(val)) {
    urlError2.value = "URL必须以 http:// 或 https:// 开头";
  } else {
    urlError2.value = "";
  }
}
const qudaoName = ref(false);
//获取详情
function goodsInfos() {
  goodsInfo().then((res) => {
    provide_type.value = res.data.goods_info.provide_type;

    activeTab.value = 0;
    console.log('获取详情的数据',provide_type.value,res.data.goods_info.docking_id)
    if (provide_type.value == 1) {
  
      if (
        res.data.goods_info.docking_id !== null ||
        res.data.goods_info.docking_id !== 0
      ) {
        console.log('等于空')
        qudaoName.value = true;
      
      } else if (
        res.data.goods_info.docking_id == null ||
        res.data.goods_info.docking_id == 0
      ) {
        laiyuan.value = "自营";
        if (res.data.goods_info.goods_type == 1) {
          daokaShow2.value = true;
          laiyuansShow.value = false;
        } else {
          daokaShow2.value = false;
          laiyuansShow.value = true;
        }
      }
    } else if (provide_type.value == 2) {
      laiyuan.value = "比较通";
    } else if (provide_type.value == 3) {
      laiyuan.value = "一键通";
    } else if (provide_type.value == 4) {
      laiyuan.value = "平台间对接";
    } else if (provide_type.value == 5) {
    }
    console.log("获取到的详情数据", res);
    docklist.value = res.data.dock_list;
    forms.docking_goods_id = "";
    forms.docking_id = "";
    forms.is_gratis = 0;
    forms.open_account_pay=2
    forms.goods_url_type = 0;
    forms.url_pwd = "";
    forms.buy_times = "";
    forms.goods_url = "";
    forms.recharge_url = "";
    forms.stock_num = "";
    pricetpllist.value = res.data.price_tpl_list;
    tpllists.value = res.data.tpl_list;
    pricelists.value = res.data.price_list;
    tacticslist.value = res.data.tactics_list;
    categorylist.value = res.data.category_list;
    allowchannels.value = res.data.allow_channels;
  });
}
//打开商品名称弹框
function btnNames6() {
  shangpingShow6.value = true;
  piliang.goodsPayStart = "";
  piliang.goodsPayEnd = "";
}
//保存批量修改商品名称
function btnName6() {
  let parm = {
    goodsPayStart: piliang.goodsPayStart,
    goodsPayEnd: piliang.goodsPayEnd,
    ids: tabslistss2.value,
  };
  editGoodsStartEndForIds(parm).then((res) => {
    console.log("res", res);
    if (res.code == 200) {
      shangpingShow6.value = false;
      getSetdocking();
      ElMessage({
        message: res.msg,
        type: "success",
      });
    }
  });
}
//打开商品名称弹框
function btnNames1() {
  shangpingShow1.value = true;
  piliang.goodsName = "";
}
const moreName = ref([]);
//批量修改定价
function btnEdintdingjia(){
  if (id2.value == "") {
    ElMessage({
      message: "批量定价能为空",
      type: "error",
    });
    return;
  }
  let parm = {
    id: id2.value,
    ids: tabslistss2.value,
  };
  getPlanList(parm).then((res)=>{
    if (res.code == 200) {
     
      piliangdiangjia.value = false;
      getSetdocking();
      ElMessage({
        message: res.msg,
        type: "success",
      });
    }
  })
}
const texts = ref("");
//批量操作
function getPiliang(e) {
  console.log("11111", e.label);
  if (tabslistss2.value == "") {
    ElMessage({
      showClose: true,
      message: "请先勾选列表",
      type: "error",
    });
    moreName.value = "";
    return;
  }

  if (e.value == "商品名称") {
    shangpingShow1.value = true;
    oldName.value = "";
    piliang.goodsName = "";
    newName.value = "";
    prevName.value = "";
    nextName.value = "";
    changeType.value = 1;
  } else if (e.value == "商品状态") {
    shangpingShow2.value = true;
    goodsStatuss.value = "";
    note.value = "";
  } else if (e.value == "商品图片") {
    selectedIndices2.value = [];
    piImgshow.value = true;
    imgActive.value = null;
    selectedIndices.value = [];
  } else if (e.value == "商品分类") {
    pifeiShow.value = true;
    piliangDate.value = [];
  } else if (e.value == "推荐商品") {
    goodsRecommendSet({ ids: tabslistss2.value }).then((res) => {
      if (res.code == 200) {
        getSetdocking();
        ElMessage({
          message: res.msg,
          type: "success",
        });
      }
    });
  } else if (e.value == "商品热门") {
    shangpingShow9s.value = true;
    piliang.goodsIsHot = "";
  } else if (e.value == "商品颜色") {
    shangpingShow9.value = true;
    piliang.goodsColor = "";
  } else if (e.value == "商品注意事项") {
    shangpingShow3.value = true;
    editorContainers.value = "";

    goodsNote.value = "";
    // if (props.modelValue) {
    //   quillInstances.value.root.innerHTML = props.modelValue;
    // }

    if (zhuangtaishixiang.value == true) {
      nextTick(() => {
        initQuills();
       
      });
      zhuangtaishixiang.value = false;
    } else {
      console.log("走这边");
    }
  } else if (e.value == "商品详情") {
    goodsInfoShow.value = true;
  piliangHtmls2.value = ''; // 清空纯文本内容（可视化模式）
  
  // ✅ 确保 xiangqingcc 状态正确
  if (xiangqingcc.value) {
    nextTick(() => {
      // ⚠️ 先检查并销毁现有的编辑器
      if (quillInstance2.value) {
        quillInstance2.value.destroy(); // 销毁旧实例
        quillInstance2.value = null;
      }
      
      // ✅ 清空富文本容器
      if (richTextEditor.value) {
        richTextEditor.value.innerHTML = ''; // 清空 DOM
      }
      // ✅ 重新初始化富文本编辑器
      initQuillss(); // 初始化新实例
      
      // ✅ 强制清空内容
      if (quillInstances.value) {
        quillInstances.value.root.innerHTML = ''; // 确保新编辑器为空
      }
      
      // ✅ 重置 xiangqingcc 状态
      xiangqingcc.value = false;
    });
  

    } else {
      console.log("走这边");
    }
   
    if (props.modelValue) {
      quillInstances.value.root.innerHTML = props.modelValue;
    }

    if (zhuangtaishixiang2.value == true) {
      nextTick(() => {
        initQuills2();
        console.log("nextTick 后容器状态:", editorContainers.value); // 调试点
      });
      zhuangtaishixiang2.value = false;
    } else {
      console.log("走这边");
    }
  } else if (e.value == "定价成本") {
    goodsPriceShow.value = true;
    goodsPrice.value = "";
  } else if (e.value == "余额限购") {
    accountminmoneyShow.value = true;
    accountminmoney.value = "";
  }else if (e.value == "加价模版") {
    jiajiaShow.value = true;
    getuserLevelList()
  } else if (e.value == "批量定价") {
    piliangdiangjia.value = true;
    id2.value=''
  }else if (e.value == "购买数量") {
    numberShow.value = true;
    start_count.value = "";
    end_count.value=''
  }
  
  else if (e.value == "设置销量") {
    ordercountShow.value = true;
    ordercount.value = "";
  } else if (e.value == "仅余额支付") {
    openaccountpayShow.value = true;
    openaccountpays.value = false;
  } else if (e.value == "可售渠道") {
    keshouShow.value = true;
    allow_channels.value = "";
  } else if (e.value == "禁售渠道") {
    jinyongShow.value = true;
    fail_channels.value = "";
  } else if (e.value == "限购策略") {
    tidShow.value = true;
    getTacticsList().then((res) => {
      tidDate.value = res.data;
    });
  } else if (e.value == "充值地址") {
    shangpingShow7.value = true;
    piliang.goodsRechargeUrl = "";
    piliang.goodsRechargeUrlPwd = "";
  }
}
//确定批量余额限购
function btnaccountminmoney() {
  if (accountminmoney.value == "") {
    ElMessage({
      message: "余额限购不能为空",
      type: "error",
    });
    return;
  }
  let parm = {
    account_min_money: accountminmoney.value,
    ids: tabslistss2.value,
  };
  editGoodsNeedMyAccountMinFree(parm).then((res) => {
    if (res.code == 200) {
      accountminmoneyShow.value = false;
      getSetdocking();
      ElMessage({
        message: res.msg,
        type: "success",
      });
    }
  });
}
//确定批量策略
function btnTid() {
  if (tids.value == "") {
    ElMessage({
      message: "策略不能为空",
      type: "error",
    });
    return;
  }
  let parm = {
    tid: tids.value,
    ids: tabslistss2.value,
  };
  editTactics(parm).then((res) => {
    if (res.code == 200) {
      tidShow.value = false;
      getSetdocking();
      ElMessage({
        message: res.msg,
        type: "success",
      });
    }
  });
}

//确定数量
function btnordercount2(){
  if (start_count.value == "" || end_count.value == '' ) {
    ElMessage({
      message: "区间范围不能为空",
      type: "error",
    });
    return;
  }
  let parm = {
    goodsPayStart: start_count.value,
    goodsPayEnd: end_count.value,
    ids: tabslistss2.value,
  };
  editGoodsStartEndForIds(parm).then((res)=>{
      if(res){
        numberShow.value=false
        getSetdocking();
        ElMessage({
        message: res.msg,
        type: "success",
      });
      }
  })
}

//确定销量
function btnordercount() {
  if (ordercount.value == "") {
    ElMessage({
      message: "销量不能为空",
      type: "error",
    });
    return;
  }
  let parm = {
    order_count: ordercount.value,
    ids: tabslistss2.value,
  };
  editGoodsOrderCountForIds(parm).then((res) => {
    if (res.code == 200) {
      ordercountShow.value = false;
      getSetdocking();
      ElMessage({
        message: res.msg,
        type: "success",
      });
    }
  });
}
//確定批量允許渠道
function btnkeshou() {
  if(allow_channels.value.length>0){
    allow_channels.value=allow_channels.value.join(',')
  }else{
    ElMessage({
      message: "渠道不能为空",
      type: "error",
    });
    return;
  }

  
  let parm = {
    allow_channels: allow_channels.value,
    ids: tabslistss2.value,
  };
  editGoodsFailChannelsForIds(parm).then((res) => {
    if (res.code == 200) {
      keshouShow.value = false;
      getSetdocking();
      ElMessage({
        message: res.msg,
        type: "success",
      });
    }
  });
}
function btnLabel(e) {
  console.log(e.label);
}
//確定批量禁用渠道
function btnjingyong() {
      if(fail_channels.value.length>0){
        fail_channels.value=fail_channels.value.join(',')
      }
  if (fail_channels.value == "") {
    ElMessage({
      message: "渠道不能为空",
      type: "error",
    });
    return;
  }
  let parm = {
    fail_channels: fail_channels.value,
    ids: tabslistss2.value,
  };
  editGoodsAllowChannelsForIds(parm).then((res) => {
    if (res.code == 200) {
      jinyongShow.value = false;
      getSetdocking();
      ElMessage({
        message: res.msg,
        type: "success",
      });
    }
  });
}
//批量确定余额支付
function btnopenaccountpay() {
   console.log('111111',openaccountpays.value)
  if (openaccountpays.value == true) {
    openaccountpays.value = 1;
  } else {
    openaccountpays.value = 2;
  }
  let parm = {
    open_account_pay: openaccountpays.value,
    ids: tabslistss2.value,
  };
  editGoodsNeedMyAccountFree(parm).then((res) => {
    if (res.code == 200) {
      openaccountpayShow.value = false;
      getSetdocking();
      ElMessage({
        message: res.msg,
        type: "success",
      });
    }
  });
}
//打开商品富文本
function btnNames3() {
  shangpingShow3.value = true;
}
//保存批量修改注意事项
function btnName3() {
  console.log("res2222", editorContainers.value);
  let parm = {
    goodsNote: editorContainers.value.innerHTML,
    ids: tabslistss2.value,
  };
  console.log("parm", editorContainers.value);

  editGoodsNoteForIds(parm).then((res) => {
    if (res.code == 200) {
      shangpingShow3.value = false;
      getSetdocking();
      ElMessage({
        message: res.msg,
        type: "success",
      });
    }
  });
}
//保存批量修改富文本
function btngoodsInfo() {
  console.log("res2222", richTextEditor.value);
  let parm = {
    goodsNote: richTextEditor.value.innerHTML,
    ids: tabslistss2.value,
  };
  console.log("parm", richTextEditor.value);

  editGoodsNoteForIds(parm).then((res) => {
    if (res.code == 200) {
      goodsInfoShow.value = false;
      getSetdocking();
      ElMessage({
        message: res.msg,
        type: "success",
      });
    }
  });
}
//打开商品状态
function btnNames2() {
  shangpingShow2.value = true;
  piliang.goodsStatus = "";
}
const nameinput = ref("");
//获取批量分类下拉
// function getchange(e){
//   console.log('eeeee',e)
//   const result = [
//   ...new Set(
//     e.flatMap(item =>
//       Array.isArray(item)
//         ? item
//         : Object.values(item)
//     ).filter(val => !['19103', '19137'].includes(val))
//   )
// ];
//    console.log('result',result)
//    piliangDate.value=result.join(',')
// }
//保存批量修改分类
function btnpiliangfei() {
  if (piliangDate.value == "") {
    ElMessage({
      message: "请选择商品分类",
      type: "error",
    });
    return;
  }
  let parm = {
    goodsCategory: piliangDate.value.join(","),
    ids: tabslistss2.value,
  };
  editGoodsCategoryForIds(parm).then((res) => {
    if (res.code == 200) {
      pifeiShow.value = false;
      getSetdocking();
      ElMessage({
        message: res.msg,
        type: "success",
      });
    }
  });
}
//获取批量定价数据
function getPlanLists(){
  getPlanList().then((res)=>{
      console.log('定价需要的数据',res)
    piliangdingjia.value=res.data
  
  })
}
const dignjias=ref("")
const infoList=ref([])
const mobans=ref("")
//定价模版下拉
function getdingjia(e){
 console.log('eeee',e,piliangdingjia.value)
 mobans.value=e
 if(e==37){
  for(let item of piliangdingjia.value){
      if(e == item.value){
        infoList.value=item.info.price_arr
      }
  }
  console.log('定价模版',e,piliangdingjia.value,infoList.value)
 
  dignjias.value=e
  console.log('定价模版',e,pricelists3.value)
  for(let item of pricelists3.value){
      item.pricePrice+=e
  }
  for (let item of pricetpllist.value) {
    item.pricePrice = Number(item.pricePrice);
   
  }
  infoList.value = infoList.value.map((res) => {
  return {  
    priceName: res.key,
    pricePrice: Number(res.value)
  };
});


  pricelists3.value = infoList.value.map((item, index) => {
    return {
      ...item,
      pricePrice:  item.pricePrice+Number(forms.cost_value), // 关键计算逻辑
    };
  });
 }else if(e==38){
  for(let item of piliangdingjia.value){
      if(e == item.value){
        infoList.value=item.info.price_arr
      }
  }
  console.log('定价模版走这边',e,piliangdingjia.value,infoList.value)
 
  dignjias.value=e
  console.log('定价模版',e,pricelists3.value)
  for(let item of pricelists3.value){
      item.pricePrice+=e
  }
  for (let item of pricetpllist.value) {
    item.pricePrice = Number(item.pricePrice);
   
  }
  infoList.value = infoList.value.map((res) => {
  return {  
    priceName: res.key,
    pricePrice: Number(res.value)
  };
});


  pricelists3.value = infoList.value.map((item, index) => {
    return {
      ...item,
      pricePrice: Number(forms.cost_value) + (Number(forms.cost_value) * Number(item.pricePrice) / 100), // 关键计算逻辑
    };
  });
 }

}


const btnkeshihua4 = async () => {
  // 1. 切换前保存当前内容
  if (!piliangHtmlShow4.value && quillInstance4.value) {
    const htmlContent = quillInstance4.value.root.innerHTML;
    piliangHtmls4.value = htmlContent; // 保存到纯文本变量
  }

  // 2. 切换显示状态
  piliangHtmlShow4.value = !piliangHtmlShow4.value;
  
  // 3. 等待DOM更新
  await nextTick();

  // 4. 初始化或恢复编辑器
  if (!piliangHtmlShow4.value) {
    initRichTextEditor4(); // 初始化或恢复富文本编辑器
  }
};

const initRichTextEditor4 = () => {
  if (!editorContainer4.value) {
    console.error('容器未找到');
    return;
  }

  // 清理旧实例
  if (quillInstance4.value) {
    quillInstance4.value.destroy();
    quillInstance4.value = null;
  }

  // 创建新的 Quill 实例
  quillInstance4.value = new Quill(editorContainer4.value, {
   
    
  });

  // 设置内容（确保不为 undefined 或 null）
  quillInstance4.value.root.innerHTML = piliangHtmls4.value || '';

  // 监听内容变化
  quillInstance4.value.on('text-change', () => {
    piliangHtmls4.value = quillInstance4.value.root.innerHTML;
  });
};







//商品详情
// const btnkeshihua3 = async () => {
//   // 1. 切换前保存内容
//   if (!piliangHtmlShow3.value && quillInstance3.value) {
//     // 从可视化编辑器获取HTML同步到文本域
//     piliangHtmls3.value = quillInstance3.value.root.innerHTML;
//   }

//   // 2. 切换状态（触发响应式更新）
//   piliangHtmlShow3.value = !piliangHtmlShow3.value;

//   // 3. 确保DOM已更新
//   await nextTick();

//   // 4. 切换到可视化编辑器时的初始化
//   if (!piliangHtmlShow3.value && editorContainer.value) {
//     // ✅ 关键：销毁旧实例避免内存泄漏
//     if (quillInstance3.value?.destroy) {
//       quillInstance3.value.destroy();
//       quillInstance3.value = null;
//     }

//     // ✅ 重新初始化编辑器
//     quillInstance3.value = new Quill(editorContainer.value, {
//       theme: "snow",
//       modules: { toolbar: true } // 根据实际配置调整
//     });

//     // ✅ 恢复内容
//     quillInstance3.value.root.innerHTML = piliangHtmls3.value || "";
//   }
// };

// 1. 在data中确保有对应的响应式变量

// 2. 修正切换方法
const btnkeshihua3 = async () => {
  // Step1: 保存当前编辑器内容到变量
  if (!piliangHtmlShow3.value && quillInstance3.value) {
    piliangHtmls3.value = quillInstance3.value.root.innerHTML;
  }

  // Step2: 切换显示状态
  piliangHtmlShow3.value = !piliangHtmlShow3.value;
  
  // Step3: 确保DOM更新完成
  await nextTick();

  // Step4: 初始化可视化编辑器
  if (!piliangHtmlShow3.value) {
    initRichTextEditor3();
  }
};

// 3. 增强编辑器初始化方法
const initRichTextEditor3 = () => {
  const container = document.querySelector('.custom-editor') as HTMLElement;
  
  if (!container) {
    console.error('编辑器容器未找到');
    return;
  }

  // 清理旧实例
  if (quillInstance3.value) {
    quillInstance3.value.off('text-change');
    quillInstance3.value = null;
  }

  // 清理容器内容
  container.innerHTML = '';

  // 创建新实例
  quillInstance3.value = new Quill(container, {
  
  
  });

  // 恢复内容
  quillInstance3.value.root.innerHTML = piliangHtmls3.value || '';

  // 监听内容变化
  quillInstance3.value.on('text-change', () => {
    piliangHtmls3.value = quillInstance3.value.root.innerHTML;
  });
};





















const rawHtmlContent2=ref("")
//批量修改详情
// const btnkeshihua2 = async () => {
//   // Step1: 保存当前内容
//   if (piliangHtmlShow2.value && quillInstance2.value) {
//     rawHtmlContent2.value = quillInstance2.value.root.innerHTML;
//   }
//   // Step2: 切换显示状态
//   piliangHtmlShow2.value = !piliangHtmlShow2.value;
//   await nextTick(); // 确保DOM更新完成
//   if (!piliangHtmlShow2.value) {
//     // Step3: 切换到富文本模式
//     try {
//       // 先销毁旧实例
//       if (quillInstance2.value) {
//         quillInstance2.value.destroy();
//         quillInstance2.value = null;
//       }
//       // 等待微任务队列清空
//       await nextTick();
      
//       // 重新初始化编辑器
//       initEditorWithContent2();
      
//       // 关键！将文本框内容同步到富文本编辑器
//       if (quillInstance2.value) {
//         quillInstance2.value.root.innerHTML = rawHtmlContent2.value || piliangHtmls2.value;
//       }
      
//       // 强制重新聚焦
//       setTimeout(() => {
//         quillInstance2.value?.focus();
//       }, 100);
//     } catch (error) {
//       console.error('编辑器初始化失败:', error);
//       // 回退到文本框模式
//       piliangHtmlShow2.value = true;
//     }
//   } else {
//     // 从富文本获取内容到文本框
//     if (quillInstance2.value) {
//       piliangHtmls2.value = quillInstance2.value.root.innerHTML;
//     }
//   }
// }
//批量修改商品详情切换
const btnkeshihua2 = async () => {
  // Step1: 保存当前内容的HTML（如果是可视化模式）
  if (!piliangHtmlShow2.value && quillInstance2.value) {
    piliangHtmls2.value = quillInstance2.value.root.innerHTML;
  }

  // Step2: 切换显示状态
  piliangHtmlShow2.value = !piliangHtmlShow2.value;
  
  await nextTick(); // 等待DOM更新完成

  if (!piliangHtmlShow2.value) {
    // Step3: 切换到富文本模式时初始化编辑器
    initRichTextEditor();
  }
};

const initRichTextEditor = () => {
  // 确保容器存在
  if (!richTextEditor.value) {
    console.error('编辑器容器未找到');
    return;
  }

  // 销毁旧实例（安全方式）
  if (quillInstance2.value?.destroy) {
    quillInstance2.value.destroy();
    quillInstance2.value = null;
  }

  // 创建新实例
  quillInstance2.value = new Quill(richTextEditor.value, {
  
 
  });

  // 设置初始内容
  quillInstance2.value.root.innerHTML = piliangHtmls2.value || "";
  
  // 监听内容变化
  quillInstance2.value.on("text-change", () => {
    piliangHtmls2.value = quillInstance2.value.root.innerHTML;
  });
};











const initEditorWithContent2 = () => {
  if (!richTextEditor.value) {
    console.error('编辑器容器未找到!');
    return;
  }

  // ✅ 先销毁旧实例（安全方式）
  if (quillInstance2.value?.destroy) {
    quillInstance2.value.destroy();
  }

  // ✅ 创建新实例
  quillInstance2.value = new Quill(richTextEditor.value, {
    theme: "snow",
    modules: { /* 配置 */ }
  });

  // 设置内容...
};




const state = reactive({
  piliangHtmlShow: false,
  rawHtmlContent: "", // 原始HTML内容
  editorContent: "",  // 编辑器内容
  quillInstance: null
})



//批量修改注意事项
const btnkeshihua = async () => {
  // Step1: 切换状态前先保存当前内容
  if (state.piliangHtmlShow && state.quillInstance) {
    state.rawHtmlContent = state.quillInstance.root.innerHTML;
  }

  // Step2: 切换显示状态
  state.piliangHtmlShow = !state.piliangHtmlShow;
  await nextTick(); // 确保DOM更新完成

  if (!state.piliangHtmlShow) {
    // Step3: 切换到富文本模式
    try {
      // 先销毁旧实例
      if (state.quillInstance) {
        state.quillInstance.off('text-change');
        const container = editorContainers.value;
        if (container) container.innerHTML = '';
        state.quillInstance = null;
      }

      // 等待微任务队列清空
      await nextTick();
      
      // 重新初始化编辑器
      initEditorWithContent();
      
      // 强制重新聚焦
      setTimeout(() => {
        state.quillInstance?.focus();
      }, 100);
    } catch (error) {
      console.error('编辑器初始化失败:', error);
      // 回退到文本框模式
      state.piliangHtmlShow = true;
    }
  }
}

const initEditorWithContent = () => {
  if (!editorContainers.value) return;
  
  // 检查容器是否可见
  if (editorContainers.value.offsetParent === null) {
    console.error('编辑器容器不可见');
    return;
  }

  // 创建新实例
  state.quillInstance = new Quill(editorContainers.value, {
    
  
  });

  // 设置内容
  state.quillInstance.root.innerHTML = piliangHtmls.value || '';
  
  // 监听内容变化
  state.quillInstance.on('text-change', () => {
    state.rawHtmlContent = state.quillInstance.root.innerHTML;
  });
}









const destroyEditor = () => {
  if (state.quillInstance) {
    try {
      state.quillInstance.off('text-change');
      state.quillInstance = null;
      const container = editorContainers.value;
      if (container) {
        container.innerHTML = '';
        // 移除所有Quill添加的样式
        const quillStyles = container.querySelectorAll('.ql-*');
        quillStyles.forEach(el => el.remove());
      }
    } catch (e) {
      console.warn('编辑器销毁错误:', e);
    }
  }
}






//批量加价
function banJiajia(){
  if (listDate.value.length == 0) {
    ElMessage({
      message: "加价模版不能为空",
      type: "error",
    });
    return;
  }
  for(let item of listDate.value){
      let parm={
        price:item.price,
        level_id:item.value
      }
      level_price_list.value.push(parm)
  }
 
  let parm={
    ids: tabslistss2.value,
    level_price_list: level_price_list.value,
  }
  savePriceLIst(parm).then((res)=>{
    if (res.code == 200) {
      jiajiaShow.value = false;
      getSetdocking();
      ElMessage({
        message: res.msg,
        type: "success",
      });
    }

  })

}


//保存批量修改商品状态
function btnName2() {
  if (goodsStatuss.value == "") {
    ElMessage({
      message: "请选择商品状态",
      type: "error",
    });
    return;
  }
  if (goodsStatuss.value == 1 || goodsStatuss.value == 3) {
    note.value = "";
  }

  let parm = {
    goodsStatus: goodsStatuss.value,
    ids: tabslistss2.value,
    note: note.value,
  };

  editGoodsStatusForIds(parm).then((res) => {
    console.log("res", res);
    if (res.code == 200) {
      shangpingShow2.value = false;
      typeShow.value = false;
      getSetdocking();
      ElMessage({
        message: res.msg,
        type: "success",
      });
    }
  });
}
//保存批量修改商品名称
function btnName1() {
  if(piliang.goodsName == '' &&oldName.value=='' && newName.value=='' && prevName.value=='' && nextName.value=='' ){
    ElMessage({
      message: "请先输入",
      type: "error",
    });
    return
  }
  let parm = {
    goodsName: piliang.goodsName,
    changeType: changeType.value,
    oldName: oldName.value,
    newName: newName.value,
    prevName: prevName.value,
    nextName: nextName.value,
    ids: tabslistss2.value,
  };
  editGoodsNameForIds(parm).then((res) => {
    console.log("res", res);
    if (res.code == 200) {
      shangpingShow1.value = false;
      shoppingShow.value = false;
      getSetdocking();
      ElMessage({
        message: res.msg,
        type: "success",
      });
    } else {
      ElMessage({
        message: res.msg,
        type: "warning",
      });
    }
  });
}
const transformFileList = (imgStr) => {
  if (!imgStr || imgStr.trim() === "") return [];
  return imgStr
    .split(",")
    .slice(0, 1)
    .filter((url) => url.trim() !== "")
    .map((url) => ({
      url: url.trim(),
      name: url.split("/").pop(),
      status: "success",
    }));
};
// 检查是否显示空提示
const showEmptyTip = (row) => {
  return !row.goods_imgs || transformFileList(row.goods_imgs).length === 0;
};
// 删除前确认
const handleBeforeRemove2 = (file, row) => {
  return ElMessageBox.confirm("确定删除这张图片吗？", "警告", {
    type: "warning",
  })
    .then(() => true)
    .catch(() => false);
};
// 实际删除处理（关键逻辑）
const handleRemove3 = async (file, row) => {
  try {
    // 1. 实际删除逻辑（API请求等）
    // await deleteImageAPI(file.url);

    // 2. 更新数据源（通过Vuex或父组件传递的方法）
    const newImgs = row.goods_imgs
      .split(",")
      .filter((url) => url.trim() !== file.url)
      .join(",");

    // 这里需要根据你的数据管理方式选择：
    // 方式1: 如果scope.row是响应式对象
    row.goods_imgs = newImgs;

    // 方式2: 通过emit通知父组件
    // emit('update-row', { ...row, goods_imgs: newImgs });

    ElMessage.success("删除成功");
  } catch (err) {
    ElMessage.error("删除失败");
  }
};
const lieimg = ref("");
const pingImgs2 = ref(false);
//列表打开图片
function btnaddimg(e) {
  selectedIndices.value = [];
  imgActive.value = "";
  pingImgs2.value = true;
  lieimg.value = e.goods_attment_face_id;
  listimgs.value = ""; // 重置选择
}

//新增模版
function btnMoban() {
  mobanShow.value = true;
}
//取消新增模块
function mobanClose() {
  mobanShow.value = false;
}
//上传视频
function btnShangVideo() {
  shoppingVideo2.value = true;
}
//上传图片之新增
function btnimgAdd() {
  shoppingimg3.value = true;
}
//打开上传图片
function btnShangImg() {
  shoppingimg2.value = true;
}
//添加库存
function btnaddkucun() {
  kucunShow2.value = true;
}
//查询卡密
function btnkaisee() {
  kamiSee.value = true;
}
//点击弹框出现卡密
function btnDao() {
  daokaShow.value = true;
}
//取消卡密
function kamiClose() {
  daokaShow.value = false;
}
//本地卡库下拉
function getSelects() {
  selecShow.value = true;
}
//本地卡库清空
function getclear() {
  selecShow.value = false;
}
//供货方式
function btnActiveindex(e) {
  activeIndex.value = e;
  console.log(e);
}
function updateContent() {

  if (editorContainer.value) {
    const htmlString =editorContainer.value.innerHTML
    const parser = new DOMParser();
    const doc = parser.parseFromString(htmlString, 'text/html');
    const pElement = doc.querySelector('p');
    console.log('显示',pElement.outerHTML); 
    piliangHtmls3.value=pElement.outerHTML
  }
}
function updateContent2() {
  if (editorContainer4.value) {
    const htmlString =editorContainer4.value.innerHTML
    const parser = new DOMParser();
    const doc = parser.parseFromString(htmlString, 'text/html');
    const pElement = doc.querySelector('p');
    console.log('显示',pElement.outerHTML); 
    piliangHtmls4.value=pElement.outerHTML
  }
}
//编辑新增
function btnbaocun() {

if(forms.goods_type ==2 && forms.template_type_id =='' ){
  ElMessage({
      message: "下单模版不能为空",
      type: "error",
    });
    return;
}


  console.log(editorContainer.value);
  forms.goods_info = editorContainer.value.innerHTML;
  forms.goods_notice = editorContainer4.value.innerHTML;
  console.log(forms.goods_info);
  if (forms.face_value == "") {
    ElMessage({
      showClose: true,
      message: "商品面值不能为空",
      type: "warning",
    });
    return;
  }
  if (forms.category_ids == "") {
    ElMessage({
      showClose: true,
      message: "商品分类不能为空",
      type: "warning",
    });
    return;
  }
  if (forms.goods_name == "") {
    ElMessage({
      showClose: true,
      message: "商品名称不能为空",
      type: "warning",
    });
    return;
  }
  if (forms.cost_value == "") {
    ElMessage({
      showClose: true,
      message: "成本价不能为空",
      type: "warning",
    });
    return;
  }
  if (forms.face_valu == "") {
    ElMessage({
      showClose: true,
      message: "面值不能为空",
      type: "warning",
    });
    return;
  }
  if (forms.goods_url_type == 1) {
    if (forms.goods_url === "") {
      ElMessage({
        showClose: true,
        message: "请输入跳转地址",
        type: "warning",
      });
      return;
    }
  }
  console.log("确实是要提交字符串", forms.allow_channels);

  forms.allow_channels = forms.allow_channels.join(",");
  forms.fail_channels = forms.fail_channels.join(",");
  forms.category_ids = forms.category_ids.join(",");
  goodsSave(forms).then((res) => {
    if (res.code == 200) {
      drawer.value = false;
      getSetdocking();
      ElMessage({
        message: res.msg,
        type: "success",
      });
    } else {
      ElMessage({
        message: res.msg,
        type: "warning",
      });
    }
  });
}
//点击库存
function btnKu() {
  kucunShow.value = true;
}
//定价类型切换
function getRadio(e) {
  console.log(e);
  if (e == 1) {
    radioShow.value = 1;
  } else {
    radioShow.value = 2;
  }
}

//默认销售确定
function priceOk() {
  priceShow.value = false;
}
//打卡销售弹框
function btnPrice() {
  priceShow.value = true;
}
//商品名称的x
function shopinDetail() {
  detailShow.value = false;
}
//点击商品名称
function btnGoodsName(e) {
  nextName.value = "";
  prevName.value = "";
  newName.value = "";
  oldName.value = "";
  piliang.goodsName = "";
  titleName.value = "";

  tabslistss2.value = e.id;
  console.log("eeeeeeeeeeee", e.id);
  shoppingShow.value = true;
  detailShow.value = true;
  titleName.value = e.goods_name;
}
//确定商品名称
function shoppingOk() {
  shoppingShow.value = false;
}
//确定商品状态
function typeOk() {
  typeShow.value = false;
}
//删除
function btnxx(e) {
  imgDate.value.splice(e, 1);
}
//点击状态
function btnTypename(e) {
  console.log(e);
  tabslistss2.value = e.id;
  typeShow.value = true;
  titleName.value = e.status;
  if (e.status == "销售") {
    goodsStatuss.value = 1;
  } else if (e.status == "暂停") {
    goodsStatuss.value = 2;
  } else if (e.status == "禁销") {
    goodsStatuss.value = 3;
  }
}
const level_price_list=ref([])
//批量修改加价模版
const listDate=ref([])
function handleSelectionChange2(e){
  console.log('eeee',e)
  listDate.value=e


}
//列表下拉选择
function handleSelectionChange(e) {
  console.log("ererererer", e);

  if (e.length > 0) {
    disabledShow.value = false;
  } else {
    disabledShow.value = true;
  }
  tabslists.value = [];
  let bobo = [];
  tabslists.value = e;
  for (let item of tabslists.value) {
    if (item.id) {
      bobo.push(item.id);
    }
  }

  // tabslistss.value = tabslists.value;
  tabslistss2.value = bobo.join(",");
  console.log("eeee1111", tabslistss2.value);
  if (bobo.length > 0) {
    disableds.value = false;
  } else {
    disableds.value = true;
  }
}
// 方法 1：直接修改 `scope.row.goods_imgs`
const handleBeforeRemove = (e) => {
  console.log("111111", e);
  return true; // 返回 `true` 允许 Element Plus 执行删除
};
const cc = ref(false);
const handleRemove2 = (uploadFile, item) => {
  console.log("1111", uploadFile);

  console.log("2222222", uploadFile, item, dataList.value);
};

//批量删除
function addOpen() {
  console.log("tabslistss.value11", tabslistss.value);
  const result = tabslistss.value.map((item) => item.id).join(",");

  delOrder({ id: result }).then(() => {
    ElMessage.success("删除成功");
    //fetchData(); // 刷新列表
    getSetdocking();
  });
}
// 打开图片预览
const openImagePreview = (imageUrl) => {
  currentImage.value = imageUrl;
  imgShow.value = true;
};

// 关闭图片预览
const closeImagePreview = () => {
  previewVisible.value = false;
};

// 更现代的复制函数（推荐）
async function btnOrdersn(orderSn) {
  try {
    // 使用现代clipboard API
    await navigator.clipboard.writeText(orderSn);

    // 显示成功提示
    if (ElNotification) {
      ElNotification({
        title: "复制成功",
        message: `已复制订单号：${orderSn}`,
        type: "success",
        duration: 1500,
      });
    } else {
      alert(`已复制：${orderSn}`);
    }
  } catch (err) {
    console.error("复制失败:", err);
    // 降级方案
    const tempTextarea = document.createElement("textarea");
    tempTextarea.value = orderSn;
    document.body.appendChild(tempTextarea);
    tempTextarea.select();

    try {
      document.execCommand("copy");
      ElMessage({
        message: "复制成功",
        type: "success",
      });
    } catch (fallbackErr) {
      console.error("降级复制失败:", fallbackErr);
    } finally {
      document.body.removeChild(tempTextarea);
    }
  }
}
// 更现代的复制函数（推荐）
async function btnOrdersn3(orderSn) {
  try {
    // 使用现代clipboard API
    await navigator.clipboard.writeText(orderSn);

    // 显示成功提示
    if (ElNotification) {
      ElNotification({
        title: "复制成功",
        message: `已复制订单号：${orderSn}`,
        type: "success",
        duration: 1500,
      });
    } else {
      alert(`已复制：${orderSn}`);
    }
  } catch (err) {
    console.error("复制失败:", err);
    // 降级方案
    const tempTextarea = document.createElement("textarea");
    tempTextarea.value = orderSn;
    document.body.appendChild(tempTextarea);
    tempTextarea.select();

    try {
      document.execCommand("copy");
      ElMessage({
        message: "复制成功",
        type: "success",
      });
    } catch (fallbackErr) {
      console.error("降级复制失败:", fallbackErr);
    } finally {
      document.body.removeChild(tempTextarea);
    }
  }
}
// 更现代的复制函数（推荐）
async function btnOrdersn2(orderSn) {
  try {
    // 使用现代clipboard API
    await navigator.clipboard.writeText(orderSn);

    // 显示成功提示
    if (ElNotification) {
      ElNotification({
        title: "复制成功",
        message: `已复制订单号：${orderSn}`,
        type: "success",
        duration: 1500,
      });
    } else {
      alert(`已复制：${orderSn}`);
    }
  } catch (err) {
    console.error("复制失败:", err);
    // 降级方案
    const tempTextarea = document.createElement("textarea");
    tempTextarea.value = orderSn;
    document.body.appendChild(tempTextarea);
    tempTextarea.select();

    try {
      document.execCommand("copy");
      ElMessage({
        message: "复制成功",
        type: "success",
      });
    } catch (fallbackErr) {
      console.error("降级复制失败:", fallbackErr);
    } finally {
      document.body.removeChild(tempTextarea);
    }
  }
}
const orderObj = ref({});
const orderotherinfo = ref({});
const allfieldlist = ref([]);
const ids = ref("");
const form = ref({
  selectedValue: "",
  show_now_status_btn: {},
  start_progres: {},
  input_list: {},
});
const inputList = ref([]);
const tabList = ref([
  {
    name: "全部商品(2622)",
  },
  // {
  // 	name: '平台订单(2622)'
  // },

  // {
  // 	name: '兑换订单(17)'
  // },
  // {
  // 	name: '平台订单(2622)'
  // },
  // {
  // 	name: '快速充值订单(0)'
  // }
]);
const checkIsMobile = () => {
  isMobile.value = window.innerWidth <= 768;
};

//合并
function btnHe(){
  heShow.value=false
}
function btnHe2(){
  heShow.value=true
}

const tabactives=ref(1)
const tabactivess=ref(1)
//详情tab切换
function btnActive(index) {
  console.log("eeee", index);
  activeTab.value = index;


  
  // 等待DOM更新完成

  
  // 根据当前标签重新初始化对应的编辑器
  if(index === 2) { // 商品详情
   console.log('11111',tabactives.value)
   tabactivess.value=1
     if(tabactives.value==1){
      initQuill();
      tabactives.value=0
     }
    
  } 



  let parm = {
    id: ids.value,
    page: 99,
    limit: 1,
  };
  if (index == 1) {
    tabactives.value=1
    tabactivess.value=1
    //订单处理界面渲染
    if (allfieldlist.value && allfieldlist.value.length > 0) {
      return;
    } else {
      // orderStatusChangeBefore({ id: ids.value }).then((res) => {
      //   console.log("处理结果", res);
      //   allfieldlist.value = res.data.all_field_list;
      // });
    }
  } else if (index == 0) {
    tabactives.value=1
    tabactivess.value=1
    //获取详情
    getOrderDetail({ id: ids.value }).then((res) => {
      console.log(res, "获取详情");
      orderObj.value = {};
      ordersn.value = {};
      orderotherinfo.value = {};
      if (res.data.order) {
        orderObj.value = res.data.order;
        ordersn.value = res.data.order.ordersn;
      }
      if (res.data.order_other_info) {
        orderotherinfo.value = res.data.order_other_info;
        console.log("这是什么", orderotherinfo.value);
      }
      if (orderObj.value.goods_type == 1) {
        orderObj.value.goods_type = "卡密商品";
      } else if (orderObj.value.goods_type == 2) {
        orderObj.value.goods_type = "充值商品";
      } else if (orderObj.value.goods_type == 3) {
        orderObj.value.goods_type = "实物商品";
      }
      if (orderObj.value.status == 1) {
        orderObj.value.status = "正在处理";
      } else if (orderObj.value.status == 3) {
        orderObj.value.status = "交易成功";
      } else if (orderObj.value.status == 2) {
        orderObj.value.status = "正在处理";
      } else if (orderObj.value.status == 0) {
        orderObj.value.status = "等待支付";
      } else if (orderObj.value.status == 4) {
        orderObj.value.status = "交易失败";
      } else if (orderObj.value.status == 5) {
        orderObj.value.status = "已成功退款";
      }
    });
  } else if (index == 3) {
    tabactives.value=1

    if(tabactivess.value==1){
      initQuill2();
      tabactivess.value=0
     }
  
    //订单劳务资金明细
    if (tableData6.value && tableData6.value.length > 0) {
      console.log("数据已存在，跳过API请求");
      return;
    } else {
      // orderSupMoneyDetail(parm).then((res) => {
      //   tableData6.value = res.data.data;
      // });
    }
  } else if (index == 4) {
    tabactives.value=1
    tabactivess.value=1
    //退款订单
    if (tableData4.value && tableData4.value.length > 0) {
      return;
    } else {
      orderRefundList(parm).then((res) => {
        console.log(res);
        if (res.data) {
          tableData4.value = res.data.data;
        }
      });
    }
  } else if (index == 5) {
    tabactivess.value=1
    tabactives.value=1
    //销售明细
    if (tableData5.value && tableData5.value.length > 0) {
      return;
    } else {
      orderAdmissionMon(parm).then((res) => {
        tableData5.value = res.data.data;
      });
    }
  } else if (index == 6) {
    //订单金额
    if (tableData3.value && tableData3.value.length > 0) {
      return;
    } else {
      orderMemberMoney(parm).then((res) => {
        tableData3.value = res.data.data;
      });
    }
  }
}
//订单处理下拉
function getSelect(e) {
  form.value.selectedValue = e;
}
//订单处理输入框
const changedValues = ref({});
const radioDate = ref([]);
function getinput(value, key, title) {
  console.log(`输入框变化 - ${title} (${key}): ${value}`);

  changedValues.value[key] = value;
}
watch(
  changedValues,
  (newVal) => {
    console.log("当前保存的对象:", newVal);
    form.value.start_progres = newVal;
  },
  { deep: true }
);
//图片上传
const handlePictureCardPreview: UploadProps["onPreview"] = (uploadFile) => {
  console.log("上传的图片", uploadFile);
  dialogImageUrl.value = uploadFile.url!;
  dialogVisible.value = true;
};
//订单单选
function btnTypenames(index, item) {
  activeType.value = index;
  console.log("这个index是什么", activeType.value);
  forms.goods_type = item.id;
}
const radioSelections = ref({});

function handleRadioChange(selectedValue, groupKey, groupTitle, allOptions) {
  // 查找选中项对应的标题
  const selectedTitle =
    allOptions.find((option) => option.value === selectedValue)?.title ||
    "未知选项";

  // 将选择结果以 key:title 形式存储
  radioSelections.value[groupKey] = selectedTitle;

  // 可选的日志输出
  console.log(`单选框变化 - ${groupTitle} (${groupKey}): ${selectedTitle}`);
  let aa = `(${groupKey}): ${selectedTitle}`;

  radioDate.value.push(aa);
  console.log(radioDate.value.toString(","));
  form.value.input_list = radioDate.value.toString(",");
}

//订单复选
// 处理复选框变更
const formData = reactive({
  radioSelections: {}, // 存储单选结果 {key: title}
  checkboxSelections: {}, // 存储复选结果 {key: [title1, title2...]}
});
function handleCheckboxChange(selectedValues, groupKey, allOptions) {
  if (!Array.isArray(selectedValues)) return;

  // 将选中的值映射为标题数组
  const selectedTitles = selectedValues.map((value) => {
    const found = allOptions.find((opt) => opt.value === value);
    return found ? found.title : `未知选项(${value})`;
  });

  // 更新存储对象
  formData.checkboxSelections[groupKey] = selectedTitles;

  // 调试输出 (示例: {'hobbies': ['篮球', '读书']})
  console.log("复选框更新:", groupKey, selectedTitles);
  form.value.show_now_status_btn = selectedTitles;
}

//订单处理确认
function btnOk() {
  let parm = {
    id: ids.value,
    ordersn: ordersn.value,
    ...form.value,
  };
  changeOrder(parm).then((res) => {});
}
const bobo = ref(false);
//查看详情

function btnSee(e, index) {
  console.log('eeeeeee',e)
  activeTab.value = 0;
  activeType.value=0
  drawer.value = true;
  quillInstance.value = "";
  quillInstance2.value = "";
  bobo.value = true;
  console.log("打印状态", zhuangtai.value);
  if (zhuangtai.value == true) {
    nextTick(() => {
      initQuill();
      initQuill2();
      console.log(
        "nextTick 后容器状态:",
        editorContainer.value,
        "ssdsdsdsdsdsd",
        editorContainer.value.innerHTML
      ); // 调试点
    });
    zhuangtai.value = false;
  } else {
    console.log("走这边");
  }

  forms.goods_info = "";
  forms.goods_notice = "";
  (forms.goods_video = ""),
    (forms.goods_type = "1"),
    (forms.goods_short_name = ""),
    (forms.goods_name_color = "#000"),
    (forms.goods_imgs = ""),
    (forms.face_value = ""),
    (forms.cost_value = ""),
    (forms.goods_price_renew_type = 1),
    (forms.priceName_id = ""),
    (forms.start_count = 1),
    (forms.end_count = 100),
    (forms.buy_times = 0),
    (forms.goods_name = ""),
    (forms.id = ""),
    (forms.category_ids = ""),
    (forms.template_type_id = ""),
    (forms.validdate_flag = 0),
    (forms.validdate_value = 0),
    (forms.tactics_id = 0),
    (forms.open_account_pay = 2),
    (forms.account_min_money = 0),
    (forms.allow_channels = []),
    (forms.fail_channels = []);
  imgDate.value = [];
  pricelists2.value = [];
  pricelists3.value = [];
}
const value = ref("");
const tabDate = ref([
  {
    name: "全部订单",
  },
  {
    name: "等待处理",
  },
  {
    name: "正在处理",
  },
  {
    name: "交易处理",
  },
  {
    name: "已经退款",
  },
  {
    name: "部分退款",
  },
  {
    name: "取消支付",
  },
  {
    name: "等待支付",
  },
]);
const options = [
  {
    value: "Option1",
    label: "预制定价",
  },
  {
    value: "Option2",
    label: "持续模版",
  },
  {
    value: "Option3",
    label: "333",
  },
  {
    value: "Option4",
    label: "666",
  },
];
const shoppingList = [
{
    value: "-1",
    label: "全部",
  },
  {
    value: "1",
    label: "销售",
  },
  {
    value: "2",
    label: "暂停",
  },
  {
    value: "3",
    label: "禁售",
  },
 
];

const searchList = [

  {
    value: "1",
    label: "商品编号",
  },
  {
    value: "2",
    label: "商品名称",
  },
  {
    value: "3",
    label: "商品面值",
  },
  {
    value: "4",
    label: "分类编号",
  },
  {
    value: "5",
    label: "所属分类",
  },
]


const shangpingDate = [
{
    value: "-1",
    label: "全部",
  },
  {
    value: "1",
    label: "卡密",
  },
  {
    value: "2",
    label: "充值商品",
  },
  {
    value: "3",
    label: "实物商品",
  },
  {
    value: "4",
    label: "29wk",
  },
]
const provide_types=ref('-1')
const proviedeList = [
{
    value: "-1",
    label: "全部",
  },
  {
    value: "1",
    label: "平台自营",
  },
  {
    value: "2",
    label: "全网通",
  },
  {
    value: "3",
    label: "一键通",
  },
  {
    value: "4",
    label: "平台间",
  },
  {
    value: "5",
    label: "前台供货",
  },
 
  {
    value: "8",
    label: "渠道对接",
  },
]
const kecunDate = [
  {
    value: "1",
    label: "有库存",
  },
  {
    value: "0",
    label: "无库存",
  },

  
]
const mobanDate = [
  {
    value: "1",
    label: "已设置",
  },
  {
    value: "0",
    label: "未设置",
  },
]
const fenleiList = [
  {
    value: "1",
    label: "已设置",
  },
  {
    value: "0",
    label: "未设置",
  },
]
const defaultProps = {
  children: "children",
  label: "label",
  disabled: "disabled",
};
const datas = ref([
  {
    id: 1,
    label: "Level one 1",
    children: [
      {
        id: 3,
        label: "Level two 2-1",
        children: [
          {
            id: 4,
            label: "Level three 3-1-1",
          },
          {
            id: 5,
            label: "Level three 3-1-2",
            disabled: true,
          },
        ],
      },
      {
        id: 2,
        label: "Level two 2-2",
        disabled: true,
        children: [
          {
            id: 6,
            label: "Level three 3-2-1",
          },
          {
            id: 7,
            label: "Level three 3-2-2",
            disabled: true,
          },
        ],
      },
    ],
  },
]);
const treeRef = ref("");
const filterText = ref("");
const activeName = ref("first");
watch(filterText, (val) => {
  treeRef.value!.filter(val);
});
const filterNode = (value: string, data: Tree) => {
  if (!value) return true;
  return data.label.includes(value);
};
const dataList = ref([]);
// 添加响应式检测
const isMobile = ref(false);
const radio = ref(3);
const isBd = ref(1);
const nameShow = ref(false);
const passwords = ref("");
const paypassword = ref("");
const payuserid = ref("");
const usernametitle = ref("");
const channelTreeData = ref([]); // 渠道树形结构数据
const currentPage = ref(1); // 当前页码
const pageSize = ref(10); // 每页显示数量
const total = ref(0); // 总记录数
const total2 = ref(0); // 总记录数
const countImg = ref(0); // 总记录数
const keyword = ref("");
const keytype = ref("");
const shoppingimg = ref(false);
const shoppingVdieo = ref(false);
const shoppingimg2 = ref(false);
const radio6 = ref(3);
const radio3 = ref(3);
const formInline = reactive({
  status: "",
  _create_time: "",
  uid: "",
  total_price: "",
  purchase_price: "",
  goods_name: "",
});
function handleIpClick(ip) {
  const url = `https://www.ip138.com/iplookup.php?ip=${encodeURIComponent(ip)}`;
  window.open(url, "_blank"); // 打开新标签页
}
const httpRequest = async (options) => {
  try {
    const formData = new FormData();
    formData.append("file", options.file);

    // 调用你的API接口
    const res = await uploads(formData);
    console.log('获取到的图片地址',res)
    getimg();
    if (res.code === 200) {
      options.onSuccess(res.data); // 必须调用以更新文件列表状态

      return res;
    } else {
      options.onError(new Error(res.message));
    }
  } catch (err) {
    options.onError(err);
  }
};


// 确认上传处理
const handleConfirmUpload = async () => {
  if (imgdias.value === 1) {
    // 本地上传模式
    if (localFiles.value.length === 0) {
      ElMessage.warning('请先选择要上传的图片')
      return
    }
    

    
    try {
      const successFiles = []
      const failedFiles = []
      
      // 遍历所有待上传文件
      for (const file of localFiles.value) {
        try {
          const formData = new FormData()
          formData.append('file', file.raw)
          
          // 调用上传API
          const res = await uploads(formData)
          if (res.code === 200) {
            successFiles.push({
              name: file.name,
              url: res.data.url // 根据你的API返回结构调整
            })
            getimg()
            imgShows.value=false
          } else {
            failedFiles.push(file.name)
          }
        } catch (error) {
          failedFiles.push(file.name)
          console.error('上传失败:', file.name, error)
        }
      }
      
      // 处理结果
      if (successFiles.length > 0) {
        ElMessage.success(`成功上传 ${successFiles.length} 张图片`)
        // 这里可以处理成功上传后的逻辑，比如更新图片列表等
      }
      
      if (failedFiles.length > 0) {
        ElMessage.error(`${failedFiles.length} 张图片上传失败: ${failedFiles.join(', ')}`)
      }
      
      // 清空待上传列表
      localFiles.value = []
      imgShows.value = false
      
    } finally {
   
    }
    
  } else {
    // 网络图片模式
    if (!remoteImageUrl.value.trim()) {
      ElMessage.warning('请输入有效的图片URL')
      return
    }
    
    try {
      // 处理网络图片上传逻辑
      // 这里可以添加网络图片的处理代码
      ElMessage.success('网络图片处理成功')
      remoteImageUrl.value = ''
      imgShows.value = false
    } catch (error) {
      ElMessage.error('处理网络图片失败')
    }
  }
}







//确认上传图片
function btnshangchuan() {
  shoppingimg2.value = false;
  imgDate.value = imgsList.value;
}
//打开批量上传图片
function btnimgShows(){
  imgShows.value=true
  textarea2.value=''
}
//批量上传图片

function pilaing() {
  console.log("dfdfdfdf", selectedIndices2.value);
  if (selectedIndices2.value.join(",") == "") {
    console.log("33333");
    ElMessage({
      message: "请先选择图片",
      type: "error",
    });
    return;
  }
  let parm = {
    ids: tabslistss2.value,
    goodsImgs: selectedIndices2.value.join(","),
  };
  editGoodsImgsForIds(parm).then((res) => {
    if (res.code == 200) {
      piImgshow.value = false;
      getSetdocking();
      ElMessage({
        message: res.msg,
        type: "success",
      });
    }
  });
}

function pilaing2() {
  

  let parm = {
    ids: tabslistss2.value,
    goodsImgs: textarea2.value,
  };
  editGoodsImgsForIds(parm).then((res) => {
    if (res.code == 200) {
      imgShows.value = false;
      getSetdocking();
      ElMessage({
        message: res.msg,
        type: "success",
      });
    }
  });
}




//上传图片
const fileList = ref<UploadUserFile[]>([]);
// 上传成功处理
const handleUploadSuccess = (
  response: any,
  file: UploadFile,
  fileList: UploadFiles
) => {
  console.log("上传成功:", response.data.data.id, response.data.data.url);
  imgsList.value.push({ url: response.data.data.url });
  imgsListId.value.push(response.data.data.url);
  forms.goods_imgs = imgsListId.value.join(",");
  console.log("获取到的图片", forms.goods_imgs);
  getimg();
  // 通常后端会返回图片URL或其他标识
};
// 批量上传成功处理
const pihandleUploadSuccess = (
  response: any,
  file: UploadFile,
  fileList: UploadFiles
) => {
  console.log("上传成功:", response);
  imgsListId2.value.push(response.data.url);
  piImg.value = imgsListId2.value.join(",");
  console.log("获取到的图片", piImg.value);
  // 通常后端会返回图片URL或其他标识
};


//定价切换

function getChelue(e){
  btninputceng(forms.cost_value)
}

//输入等级
function btnInput2(e){
  btnInputss(Number(e.pricePrice))

}

//成本价
function btninputceng(e) {
  
  if(forms.goods_price_renew_type ==1){
    if(mobans.value==37){
      for (let item of infoList.value) {
    item.pricePrice = Number(item.pricePrice);
    console.log('看看这个11111',item.pricePrice)
  }
;
  pricelists3.value = infoList.value.map((item, index) => {
    return {
      ...item,
      pricePrice:  item.pricePrice+Number(forms.cost_value), // 关键计算逻辑
    };
  });
    }else if(mobans.value ==38){
      for (let item of infoList.value) {
    item.pricePrice = Number(item.pricePrice);
    console.log('看看这个11111',item.pricePrice)
  }
;
  pricelists3.value = infoList.value.map((item, index) => {
    return {
      ...item,
      pricePrice: Number(forms.cost_value) + (Number(forms.cost_value) * Number(item.pricePrice) / 100), // 关键计算逻辑
   
    };
  });

    }
   
  }else if(forms.goods_price_renew_type ==2){
    if(dingjiaInputs.value==1){
  
  let cc = e;
  for (let item of pricetpllist.value) {
    item.pricePrice = Number(item.pricePrice);
    console.log('看看这个2222',item.pricePrice)
  }
;
  pricelists3.value = pricetpllist.value.map((item, index) => {
    return {
      ...item,
      pricePrice:  item.pricePrice+Number(forms.cost_value), // 关键计算逻辑
    };
  });
  console.log('成本价',pricelists3.value)
}else{

  for (let item of pricetpllist.value) {
    item.pricePrice = Number(item.pricePrice);
  }
;
  pricelists3.value = pricetpllist.value.map((item, index) => {
    return {
      ...item,
      pricePrice: Number(forms.cost_value) + (Number(forms.cost_value) * Number(item.pricePrice) / 100), // 关键计算逻辑
    };
  });
}

  }




}


//输入级别差价
function btnInput(e) {

  if(dingjiaInputs.value==1){
    let cc = e;
  for (let item of pricetpllist.value) {
    item.pricePrice = Number(item.pricePrice);
  }
  pricetpllist.value = pricetpllist.value.map((item, index) => {
    return {
      ...item,
      pricePrice: (index + 1) * cc, // 关键计算逻辑
    };
  });
  pricelists3.value = pricetpllist.value.map((item, index) => {
    return {
      ...item,
      pricePrice: (index + 1) * cc+Number(forms.cost_value), // 关键计算逻辑
    };
  });
  forms.level_price_list = pricetpllist.value;
  pricelists2.value= pricetpllist.value

  }else{
    let cc = e;
  for (let item of pricetpllist.value) {
    item.pricePrice = Number(item.pricePrice);
  }
  pricetpllist.value = pricetpllist.value.map((item, index) => {
    return {
      ...item,
      pricePrice: (index + 1) * cc, // 关键计算逻辑
    };
  });
  pricelists3.value = pricetpllist.value.map((item, index) => {
    return {
      ...item,
      pricePrice: Number(forms.cost_value) + (Number(forms.cost_value) * Number(item.pricePrice) / 100), // 关键计算逻辑
    };
  });
  forms.level_price_list = pricetpllist.value;
  pricelists2.value= pricetpllist.value

  }




}

//输入级别差价
function btnInputss(e) {

if(dingjiaInputs.value==1){
  let cc = e;
for (let item of pricetpllist.value) {
  item.pricePrice = Number(item.pricePrice);
}

pricelists3.value = pricetpllist.value.map((item, index) => {
  return {
    ...item,
    pricePrice: item.pricePrice+Number(forms.cost_value), // 关键计算逻辑
  };
});
forms.level_price_list = pricetpllist.value;
pricelists2.value= pricetpllist.value

}else{
  let cc = e;
for (let item of pricetpllist.value) {
  item.pricePrice = Number(item.pricePrice);
}

pricelists3.value = pricetpllist.value.map((item, index) => {
  return {
    ...item,
    pricePrice: Number(forms.cost_value) + (Number(forms.cost_value) * Number(item.pricePrice) / 100), // 关键计算逻辑
  };
});
forms.level_price_list = pricetpllist.value;
pricelists2.value= pricetpllist.value

}




}
//删除图片
const handleRemove: UploadProps["onRemove"] = (file, uploadFiles) => {
  console.log(file, uploadFiles, imgsList.value);
  imgsListId.value = [];
  imgsList.value = [];
  forms.goods_imgs = "";
  for (let item of uploadFiles) {
    console.log("dfdfdf", item.uid);
    imgsListId.value.push(item.uid);
    imgsList.value.push({ url: item.url });
  }
  console.log("imgsListId", imgsListId.value);
  forms.goods_imgs = imgsListId.value.join(",");
};

const showViewer = ref(false); // 控制是否显示图片查看器
const previewImages = ref([]); // 存放所有图片 URL
const previewIndex = ref(0);

const handlePreview = (file) => {
  console.log("ddddd", file);
  currentImage.value = file.url;
  imgShow.value = true;
};

const handleExceed: UploadProps["onExceed"] = (files, uploadFiles) => {
  console.log("上传", files);
  ElMessage.warning(
    `The limit is 3, you selected ${files.length} files this time, add up to ${
      files.length + uploadFiles.length
    } totally`
  );
};
//商品视频
function btnVideo() {
  shoppingVdieo.value = true;
}
//点击商品图片
function btnimg() {
  shoppingimg.value = true;
}
const pricelists3s=ref([])
//点击售价
function btnShou(e) {
  getOneGoodsLevelPrice({id:e.id}).then((res)=>{
    pricelists3s.value = res.data;
  })
  // goodsInfo({id:e.id}).then((res)=>{
  //   pricelists3.value = res.data.goods_info.price_list;
  // })
  xiaoshouShow.value = true;
}
//点击tab切换
function btnName(e) {
  names.value = e;
}
//点击电锯切换
function btnTable(e) {
  tabname.value = e;
}
function handleUpdateNode({ id, property, value }) {
  // 更新树数据中对应节点的属性
  const updateNode = (nodes) => {
    return nodes.map((node) => {
      if (node.id === id) {
        return { ...node, [property]: value };
      }
      if (node.list) {
        return { ...node, list: updateNode(node.list) };
      }
      return node;
    });
  };
  channelTreeData.value = updateNode(channelTreeData.value);
}
const openGoodsDetail = (id) => {
  // 编码特殊字符（如果id包含特殊字符）
  const encodedId = encodeURIComponent(id);
  const url = `https://demo.kasushou.com/goods?id=${encodedId}`;

  // 尝试打开新窗口
  const newWindow = window.open(url, "_blank", "noopener,noreferrer");

  if (!newWindow) {
    // 优雅处理被拦截的情况
    const confirmed = confirm("弹出窗口被阻止，是否允许此操作？");
    if (confirmed) {
      window.location.href = url; // 当前窗口跳转
    }
  }
};

// 删除方法
const handleDelete = (id: string) => {
  ElMessageBox.confirm("确定要删除这条记录吗?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      // 这里调用删除API
      delGoodsForIds({ ids: id }).then(() => {
        ElMessage.success("删除成功");
        //fetchData(); // 刷新列表
        getSetdocking();
      });
    })
    .catch(() => {
      ElMessage.info("已取消删除");
    });
};

const submit = () => {
  AddDock(addform).then(() => {
    dialogVisible.value = false;
    handleQuery(); // 提交后刷新列表
  });
};
// 查询处理
const handleQuery = () => {
  currentPage.value = 1; // 重置为第一页
  getSetdocking();
};

// 重置查询条件
const handleReset = () => {
  formInline.user = "";
  handleQuery();
};
// 分页尺寸变化
const handlePageSizeChange = (size: number) => {
  pageSize.value = size;
  getSetdocking();
};
//获取到注意事项的数据
function getshixiang() {
  if (editorContainers.value) {
    const parser = new DOMParser();
    const doc = parser.parseFromString(editorContainers.value.innerHTML, 'text/html');
    const qlEditor = doc.querySelector('div.ql-editor'); // 找到整个 div.ql-editor

    if (qlEditor) {
      console.log('完整的 div.ql-editor HTML:', qlEditor.innerHTML);
      piliangHtmls.value = qlEditor.innerHTML; // 赋值完整的 HTML
    } else {
      console.warn('未找到 div.ql-editor');
    }
  }
}


//获取到富文本数据
function getshixiang2() {
  
  if (richTextEditor.value) {

    const parser = new DOMParser();
    const doc = parser.parseFromString(richTextEditor.value.innerHTML, 'text/html');
    const qlEditor = doc.querySelector('div.ql-editor'); // 找到整个 div.ql-editor

    if (qlEditor) {
      console.log('完整的 div.ql-editor HTML:', qlEditor.innerHTML);
      piliangHtmls2.value = qlEditor.innerHTML; // 赋值完整的 HTML
    } else {
      console.warn('未找到 div.ql-editor');
    }
    
    // const htmlString =richTextEditor.value.innerHTML
    // const parser = new DOMParser();
    // const doc = parser.parseFromString(htmlString, 'text/html');
    // const pElement = doc.querySelector('p');
    // console.log('显示',pElement.outerHTML); 
    // piliangHtmls2.value=pElement.outerHTML

  }
  
}
// 页码变化
const handleCurrentPageChange = (page: number) => {
  currentPage.value = page;
  getSetdocking();
};
const initialContent = ref("<p>初始内容</p>");
let ignoreInternalUpdate = false;
let ignoreInternalUpdate2 = false;
function initQuill() {
  console.log("为什么先走这个符文布");
  try {
    // 检查DOM元素是否存在
    if (!editorContainer.value) throw new Error("DOM容器未就绪");

 
    



    // 设置初始内容
    if (editorContent.value) {
      quillInstance.value.root.innerHTML = editorContent.value;
    }

    // 监听编辑器的变化
    quillInstance.value.on("text-change", () => {
      if (ignoreInternalUpdate) return;
      const newHTML = quillInstance.value.root.innerHTML;

      // 只有当内容确实改变时才更新editorContent
      if (editorContent.value !== newHTML) {
        ignoreInternalUpdate = true;
        editorContent.value = newHTML;
        ignoreInternalUpdate = false;
      }
    });
  } catch (e) {
    console.error("初始化Quill失败:", e);
    boboShow.value = true;
  }


  // 1. 预加载CSS强制覆盖
  forceChineseCSS();

  // 2. 增强版汉化配置
  const ChineseLabels = {
    fonts: {
      "sans-serif": "默认",
      SimSun: "宋体",
      SimHei: "黑体",
      "Microsoft-YaHei": "微软雅黑",
      KaiTi: "楷体",
      FangSong: "仿宋",
      Arial: "Arial",
      "Times-New-Roman": "Times New Roman",
      "Courier-New": "Courier New",
    },
    sizes: {
      "10px": "小五",
      "12px": "小四",
      "14px": "小三",
      "16px": "小二",
      "18px": "小一",
      "24px": "二号",
      "36px": "一号",
    },
    formats: {
      normal: "正文",
      h1: "标题1",
      h2: "标题2",
      h3: "标题3",
      h4: "标题4",
      h5: "标题5",
      h6: "标题6",
    },
    toolbarTexts: {
      bold: "加粗",
      italic: "斜体",
      underline: "下划线",
      strike: "删除线",
      blockquote: "引用",
      code: "代码",
      list: "列表",
      ordered: "有序列表",
      bullet: "无序列表",
      script: "上下标",
      sub: "下标",
      super: "上标",
      indent: "缩进",
      direction: "方向",
      align: "对齐",
      link: "链接",
      image: "图片",
      video: "视频",
      clean: "清除格式",
      color: "文字颜色",
      background: "背景色",
      formula: "公式",
      font: "字体",
      size: "字号",
    },
  };

  // 注册字体和字号格式器
  const FontAttributor = Quill.import("attributors/class/font");
  FontAttributor.whitelist = Object.keys(ChineseLabels.fonts);
  Quill.register(FontAttributor, true);

  const SizeAttributor = Quill.import("attributors/class/size");
  SizeAttributor.whitelist = Object.keys(ChineseLabels.sizes);
  Quill.register(SizeAttributor, true);

  // 3. 完整汉化函数
  const fullLocalization = () => {
    // 字体下拉菜单汉化
    const fontPicker = editorContainer.value.querySelector(".ql-font");
    if (fontPicker) {
      document.querySelectorAll(".ql-font .ql-picker-item").forEach((item) => {
        const fontValue = item.getAttribute("data-value");
        if (fontValue && ChineseLabels.fonts[fontValue]) {
          item.innerHTML = ChineseLabels.fonts[fontValue];
          item.style.fontFamily = fontValue; // 确保预览效果正确
        }
      });

      const currentFont =
        quillInstances.value?.getFormat().font || "sans-serif";
      document.querySelector(".ql-font .ql-picker-label").innerHTML =
        ChineseLabels.fonts[currentFont] || "字体";
    }

    // 字号下拉菜单汉化
    const sizePicker = editorContainer.value.querySelector(".ql-size");
    if (sizePicker) {
      document.querySelectorAll(".ql-size .ql-picker-item").forEach((item) => {
        const sizeValue = item.getAttribute("data-value");
        if (sizeValue && ChineseLabels.sizes[sizeValue]) {
          item.innerHTML = ChineseLabels.sizes[sizeValue];
          item.style.fontSize = sizeValue; // 确保预览效果正确
        }
      });

      const currentSize =
        quillInstances.value?.getFormat().size ||
        Object.keys(ChineseLabels.sizes)[1];
      document.querySelector(".ql-size .ql-picker-label").innerHTML =
        ChineseLabels.sizes[currentSize] || "字号";
    }

    // 标题格式下拉菜单汉化
    const headerPicker = editorContainer.value.querySelector(".ql-header");
    if (headerPicker) {
      document
        .querySelectorAll(".ql-header .ql-picker-item")
        .forEach((item) => {
          const formatValue = item.getAttribute("data-value");
          if (formatValue && ChineseLabels.formats[formatValue]) {
            item.innerHTML = ChineseLabels.formats[formatValue];
          }
        });

      const currentFormat =
        quillInstances.value?.getFormat().header || "normal";
      document.querySelector(".ql-header .ql-picker-label").innerHTML =
        ChineseLabels.formats[`h${currentFormat}`] || "格式";
    }
  };


  // 4. 初始化流程（优化版）
  nextTick(() => {
    setTimeout(() => {
      console.log('Checking if container exists:', editorContainer.value);
      console.log('Checking if Quill exists:', typeof Quill);
      try {
        const Parchment = Quill.import("parchment");
        const Inline = Quill.import("blots/inline");
        const CodeBlock = Quill.import("formats/code-block");
        Quill.register(CodeBlock, true);

        const Font = Quill.import("formats/font");
        Font.whitelist = [
          "SimSun",
          "SimHei",
          "Microsoft-YaHei",
          "KaiTi",
          "FangSong",
        ];
        Quill.register(Font, true);
        const Size = Quill.import("attributors/style/size");
        Size.whitelist = ["10px", "12px", "14px", "16px", "18px"];
        Quill.register(Size, true);

        // 自定义代码格式
        class CodeBlot extends Inline {
          static create(value) {
            const node = super.create();
            node.setAttribute("class", "ql-code");
            return node;
          }
        }
        CodeBlot.blotName = "code";
        CodeBlot.tagName = ["code"];
        Quill.register(CodeBlot);
        // 注册代码块格式
        // const CodeBlock = Quill.import('formats/code-block');
        // Quill.register(CodeBlock, true);

        // 销毁旧实例
        if (quillInstances.value) quillInstances.value.destroy();
        // 3. 创建HTML按钮自定义处理函数
     
        const htmlHandler = () => {
          console.log('测试商品详情',quillInstances.value)
          piliangHtmlShow3.value=true
          if (!quillInstances.value) return;
          console.log('22222')
          const range = quillInstances.value.getSelection();
          if (!range) return;
          
          const selectedText = quillInstances.value.getText(range.index, range.length);
          console.log('dddddd11111',selectedText)
          if (selectedText) {
            // 如果有选中文本，将选中文本转为HTML代码块
            const htmlContent = `<pre><code>${selectedText}</code></pre>`;
            quillInstances.value.deleteText(range.index, range.length);
            quillInstances.value.clipboard.dangerouslyPasteHTML(range.index, htmlContent);
          } else {
            // 如果没有选中文本，插入HTML代码块模板
            const htmlTemplate = `<pre><code><!-- 在此输入HTML代码 --></code></pre>`;
            quillInstances.value.clipboard.dangerouslyPasteHTML(range.index, htmlTemplate);
            // 将光标定位到可编辑区域
            quillInstances.value.setSelection(range.index + 4, 0);
          }
        };


        // 创建新实例
        quillInstances.value = new Quill(editorContainer.value, {
          theme: "snow",
          bounds: editorContainer.value,
          modules: {
            toolbar: {
              container: [
                ["code-block"], // 代码块按钮
                ["html-code"], // 自定义HTML按钮
                ["bold", "italic", "underline"],
                ["bold", "italic", "underline", "strike"],
                [{ header: [1, 2, 3, 4, 5, 6, false] }],
                [
                  { font: Object.keys(ChineseLabels.fonts) },
                  { size: Object.keys(ChineseLabels.sizes) },
                ],
                [{ color: [] }, { background: [] }],
                [{ script: "sub" }, { script: "super" }],
                [{ list: "ordered" }, { list: "bullet" }],
                [{ indent: "-1" }, { indent: "+1" }],
                [{ direction: "rtl" }, { align: [] }],
                ["blockquote", "code-block", "html-code"], // 添加自定义HTML按钮
                ["link", "image", "video", "formula"],
                ["clean"],
                
              ],
              handlers: {
                "html-code": htmlHandler, // 注册HTML按钮处理函数
              },
            },
            syntax: true, // 启用代码高亮
            clipboard: {
              matchVisual: false, // 防止粘贴时格式错乱
            },
          },

          formats: [
            "code",
            "code-block", // 确保code格式在允许的格式列表中
            "bold",
            "italic",
            "underline",
            "strike",
            "font",
            "size",
            "header",
            "script",
            "blockquote",
            "code-block",
            "list",
            "bullet",
            "ordered",
            "indent",
            "link",
            "image",
            "video",
            "color",
            "background",
            "align",
            "direction",
            "formula",
          ],
          placeholder: "请输入内容...",
        });

        const addHtmlButton = () => {
          console.log("11111");
          const toolbar = editorContainer.value.querySelector(".ql-toolbar");
          if (!toolbar) return;

          const htmlButton = document.createElement("button");
          htmlButton.className = "ql-html-code";
          htmlButton.innerHTML = '<i class="icon-code"></i>';
          htmlButton.title = "转换HTML/代码";
          htmlButton.onclick = (e) => {
            e.preventDefault();
            htmlHandler();
          };
          const codeBlockGroup = toolbar.querySelector(".ql-code-block");
          if (codeBlockGroup) {
            codeBlockGroup.parentNode.insertBefore(
              htmlButton,
              codeBlockGroup.nextSibling
            );
          } else {
            toolbar.appendChild(htmlButton);
          }
        };
        // 延迟添加按钮确保DOM加载完成
        setTimeout(addHtmlButton, 100);

        // 初始化工具栏汉化
        const initialToolbarTexts = {
          "html-code": "HTML代码",
          bold: ChineseLabels.toolbarTexts.bold,
          italic: ChineseLabels.toolbarTexts.italic,
          underline: ChineseLabels.toolbarTexts.underline,
          strike: ChineseLabels.toolbarTexts.strike,
          blockquote: ChineseLabels.toolbarTexts.blockquote,
          code: ChineseLabels.toolbarTexts.code,
          list: ChineseLabels.toolbarTexts.list,
          ordered: ChineseLabels.toolbarTexts.ordered,
          bullet: ChineseLabels.toolbarTexts.bullet,
          script: ChineseLabels.toolbarTexts.script,
          indent: ChineseLabels.toolbarTexts.indent,
          direction: ChineseLabels.toolbarTexts.direction,
          align: ChineseLabels.toolbarTexts.align,
          link: ChineseLabels.toolbarTexts.link,
          image: ChineseLabels.toolbarTexts.image,
          video: ChineseLabels.toolbarTexts.video,
          clean: ChineseLabels.toolbarTexts.clean,
          color: ChineseLabels.toolbarTexts.color,
          background: ChineseLabels.toolbarTexts.background,
          formula: ChineseLabels.toolbarTexts.formula,
        };

        Object.entries(initialToolbarTexts).forEach(([key, value]) => {
          if (key === "html-code") {
            const toolbar = editorContainer4.value.querySelector(".ql-toolbar");
            if (toolbar) {
              // 检查按钮是否已经存在
              let button = toolbar.querySelector(".ql-html-code");
              if (!button) {
                button = document.createElement("button");
                button.className = "ql-html-code";
                button.title = value;
                button.innerHTML = "HTML";

                // 确保添加到适当的位置
                const codeBlockGroup = toolbar.querySelector(".ql-code-block");
                if (codeBlockGroup) {
                  codeBlockGroup.parentNode.insertBefore(
                    button,
                    codeBlockGroup.nextSibling
                  );
                } else {
                  toolbar.appendChild(button);
                }
              }
            }
          } else {
            const button = editorContainer.value.querySelector(`.ql-${key}`);
            if (button) button.title = value;
          }
        });

        // 初始化下拉菜单默认文本
        const fontPicker = document.querySelector(".ql-font .ql-picker-label");
        const sizePicker = document.querySelector(".ql-size .ql-picker-label");
        const headerPicker = document.querySelector(
          ".ql-header .ql-picker-label"
        );
        const alignPicker = document.querySelector(
          ".ql-align .ql-picker-label"
        );

        if (fontPicker) fontPicker.innerHTML = "字体";
        if (sizePicker) sizePicker.innerHTML = "字号";
        if (headerPicker) headerPicker.innerHTML = "格式";
        if (alignPicker) alignPicker.innerHTML = "对齐";

        // 初始化汉化
        fullLocalization();

        // 内容变化时重新汉化
        quillInstances.value.on("editor-change", () => {
          fullLocalization();
          forms.goods_info = quillInstances.value.root.innerHTML;
        });
      } catch (e) {
        console.error("编辑器初始化失败:", e);
        
      }
      console.log('Quill实例:', quillInstances.value)
    }, 50);
  });




}


function initQuill2() {
  // 1. 预加载CSS强制覆盖
  forceChineseCSS();

  // 2. 增强版汉化配置
  const ChineseLabels = {
    fonts: {
      "sans-serif": "默认",
      SimSun: "宋体",
      SimHei: "黑体",
      "Microsoft-YaHei": "微软雅黑",
      KaiTi: "楷体",
      FangSong: "仿宋",
      Arial: "Arial",
      "Times-New-Roman": "Times New Roman",
      "Courier-New": "Courier New",
    },
    sizes: {
      "10px": "小五",
      "12px": "小四",
      "14px": "小三",
      "16px": "小二",
      "18px": "小一",
      "24px": "二号",
      "36px": "一号",
    },
    formats: {
      normal: "正文",
      h1: "标题1",
      h2: "标题2",
      h3: "标题3",
      h4: "标题4",
      h5: "标题5",
      h6: "标题6",
    },
    toolbarTexts: {
      bold: "加粗",
      italic: "斜体",
      underline: "下划线",
      strike: "删除线",
      blockquote: "引用",
      code: "代码",
      list: "列表",
      ordered: "有序列表",
      bullet: "无序列表",
      script: "上下标",
      sub: "下标",
      super: "上标",
      indent: "缩进",
      direction: "方向",
      align: "对齐",
      link: "链接",
      image: "图片",
      video: "视频",
      clean: "清除格式",
      color: "文字颜色",
      background: "背景色",
      formula: "公式",
      font: "字体",
      size: "字号",
    },
  };

  // 注册字体和字号格式器
  const FontAttributor = Quill.import("attributors/class/font");
  FontAttributor.whitelist = Object.keys(ChineseLabels.fonts);
  Quill.register(FontAttributor, true);

  const SizeAttributor = Quill.import("attributors/class/size");
  SizeAttributor.whitelist = Object.keys(ChineseLabels.sizes);
  Quill.register(SizeAttributor, true);

  // 3. 完整汉化函数
  const fullLocalization = () => {
    // 字体下拉菜单汉化
    const fontPicker = editorContainer4.value.querySelector(".ql-font");
    if (fontPicker) {
      document.querySelectorAll(".ql-font .ql-picker-item").forEach((item) => {
        const fontValue = item.getAttribute("data-value");
        if (fontValue && ChineseLabels.fonts[fontValue]) {
          item.innerHTML = ChineseLabels.fonts[fontValue];
          item.style.fontFamily = fontValue; // 确保预览效果正确
        }
      });

      const currentFont =
        quillInstances.value?.getFormat().font || "sans-serif";
      document.querySelector(".ql-font .ql-picker-label").innerHTML =
        ChineseLabels.fonts[currentFont] || "字体";
    }

    // 字号下拉菜单汉化
    const sizePicker = editorContainer4.value.querySelector(".ql-size");
    if (sizePicker) {
      document.querySelectorAll(".ql-size .ql-picker-item").forEach((item) => {
        const sizeValue = item.getAttribute("data-value");
        if (sizeValue && ChineseLabels.sizes[sizeValue]) {
          item.innerHTML = ChineseLabels.sizes[sizeValue];
          item.style.fontSize = sizeValue; // 确保预览效果正确
        }
      });

      const currentSize =
        quillInstances.value?.getFormat().size ||
        Object.keys(ChineseLabels.sizes)[1];
      document.querySelector(".ql-size .ql-picker-label").innerHTML =
        ChineseLabels.sizes[currentSize] || "字号";
    }

    // 标题格式下拉菜单汉化
    const headerPicker = editorContainer4.value.querySelector(".ql-header");
    if (headerPicker) {
      document
        .querySelectorAll(".ql-header .ql-picker-item")
        .forEach((item) => {
          const formatValue = item.getAttribute("data-value");
          if (formatValue && ChineseLabels.formats[formatValue]) {
            item.innerHTML = ChineseLabels.formats[formatValue];
          }
        });

      const currentFormat =
        quillInstances.value?.getFormat().header || "normal";
      document.querySelector(".ql-header .ql-picker-label").innerHTML =
        ChineseLabels.formats[`h${currentFormat}`] || "格式";
    }
  };

  // 4. 初始化流程（优化版）
  nextTick(() => {
    setTimeout(() => {
      console.log('Checking if container exists:', editorContainer4.value);
      console.log('Checking if Quill exists:', typeof Quill);
      try {
        const Parchment = Quill.import("parchment");
        const Inline = Quill.import("blots/inline");
        const CodeBlock = Quill.import("formats/code-block");
        Quill.register(CodeBlock, true);

        const Font = Quill.import("formats/font");
        Font.whitelist = [
          "SimSun",
          "SimHei",
          "Microsoft-YaHei",
          "KaiTi",
          "FangSong",
        ];
        Quill.register(Font, true);
        const Size = Quill.import("attributors/style/size");
        Size.whitelist = ["10px", "12px", "14px", "16px", "18px"];
        Quill.register(Size, true);

        // 自定义代码格式
        class CodeBlot extends Inline {
          static create(value) {
            const node = super.create();
            node.setAttribute("class", "ql-code");
            return node;
          }
        }
        CodeBlot.blotName = "code";
        CodeBlot.tagName = ["code"];
        Quill.register(CodeBlot);
        // 注册代码块格式
        // const CodeBlock = Quill.import('formats/code-block');
        // Quill.register(CodeBlock, true);

        // 销毁旧实例
        if (quillInstances.value) quillInstances.value.destroy();
        // 3. 创建HTML按钮自定义处理函数
     
        const htmlHandler = () => {
          console.log('的地方地方',quillInstances.value)
          piliangHtmlShow4.value=true
          if (!quillInstances.value) return;
          console.log('22222')
          const range = quillInstances.value.getSelection();
          if (!range) return;
          
          const selectedText = quillInstances.value.getText(range.index, range.length);
          console.log('dddddd11111',selectedText)
          if (selectedText) {
            // 如果有选中文本，将选中文本转为HTML代码块
            const htmlContent = `<pre><code>${selectedText}</code></pre>`;
            quillInstances.value.deleteText(range.index, range.length);
            quillInstances.value.clipboard.dangerouslyPasteHTML(range.index, htmlContent);
          } else {
            // 如果没有选中文本，插入HTML代码块模板
            const htmlTemplate = `<pre><code><!-- 在此输入HTML代码 --></code></pre>`;
            quillInstances.value.clipboard.dangerouslyPasteHTML(range.index, htmlTemplate);
            // 将光标定位到可编辑区域
            quillInstances.value.setSelection(range.index + 4, 0);
          }
        };


        // 创建新实例
        quillInstances.value = new Quill(editorContainer4.value, {
          theme: "snow",
          bounds: editorContainer4.value,
          modules: {
            toolbar: {
              container: [
                ["code-block"], // 代码块按钮
                ["html-code"], // 自定义HTML按钮
                ["bold", "italic", "underline"],
                ["bold", "italic", "underline", "strike"],
                [{ header: [1, 2, 3, 4, 5, 6, false] }],
                [
                  { font: Object.keys(ChineseLabels.fonts) },
                  { size: Object.keys(ChineseLabels.sizes) },
                ],
                [{ color: [] }, { background: [] }],
                [{ script: "sub" }, { script: "super" }],
                [{ list: "ordered" }, { list: "bullet" }],
                [{ indent: "-1" }, { indent: "+1" }],
                [{ direction: "rtl" }, { align: [] }],
                ["blockquote", "code-block", "html-code"], // 添加自定义HTML按钮
                ["link", "image", "video", "formula"],
                ["clean"],
                
              ],
              handlers: {
                "html-code": htmlHandler, // 注册HTML按钮处理函数
              },
            },
            syntax: true, // 启用代码高亮
            clipboard: {
              matchVisual: false, // 防止粘贴时格式错乱
            },
          },

          formats: [
            "code",
            "code-block", // 确保code格式在允许的格式列表中
            "bold",
            "italic",
            "underline",
            "strike",
            "font",
            "size",
            "header",
            "script",
            "blockquote",
            "code-block",
            "list",
            "bullet",
            "ordered",
            "indent",
            "link",
            "image",
            "video",
            "color",
            "background",
            "align",
            "direction",
            "formula",
          ],
          placeholder: "请输入内容...",
        });

        const addHtmlButton = () => {
          console.log("11111");
          const toolbar = editorContainer4.value.querySelector(".ql-toolbar");
          if (!toolbar) return;

          const htmlButton = document.createElement("button");
          htmlButton.className = "ql-html-code";
          htmlButton.innerHTML = '<i class="icon-code"></i>';
          htmlButton.title = "转换HTML/代码";
          htmlButton.onclick = (e) => {
            e.preventDefault();
            htmlHandler();
          };
          const codeBlockGroup = toolbar.querySelector(".ql-code-block");
          if (codeBlockGroup) {
            codeBlockGroup.parentNode.insertBefore(
              htmlButton,
              codeBlockGroup.nextSibling
            );
          } else {
            toolbar.appendChild(htmlButton);
          }
        };
        // 延迟添加按钮确保DOM加载完成
        setTimeout(addHtmlButton, 100);

        // 初始化工具栏汉化
        const initialToolbarTexts = {
          "html-code": "HTML代码",
          bold: ChineseLabels.toolbarTexts.bold,
          italic: ChineseLabels.toolbarTexts.italic,
          underline: ChineseLabels.toolbarTexts.underline,
          strike: ChineseLabels.toolbarTexts.strike,
          blockquote: ChineseLabels.toolbarTexts.blockquote,
          code: ChineseLabels.toolbarTexts.code,
          list: ChineseLabels.toolbarTexts.list,
          ordered: ChineseLabels.toolbarTexts.ordered,
          bullet: ChineseLabels.toolbarTexts.bullet,
          script: ChineseLabels.toolbarTexts.script,
          indent: ChineseLabels.toolbarTexts.indent,
          direction: ChineseLabels.toolbarTexts.direction,
          align: ChineseLabels.toolbarTexts.align,
          link: ChineseLabels.toolbarTexts.link,
          image: ChineseLabels.toolbarTexts.image,
          video: ChineseLabels.toolbarTexts.video,
          clean: ChineseLabels.toolbarTexts.clean,
          color: ChineseLabels.toolbarTexts.color,
          background: ChineseLabels.toolbarTexts.background,
          formula: ChineseLabels.toolbarTexts.formula,
        };

        Object.entries(initialToolbarTexts).forEach(([key, value]) => {
          if (key === "html-code") {
            const toolbar = editorContainer4.value.querySelector(".ql-toolbar");
            if (toolbar) {
              // 检查按钮是否已经存在
              let button = toolbar.querySelector(".ql-html-code");
              if (!button) {
                button = document.createElement("button");
                button.className = "ql-html-code";
                button.title = value;
                button.innerHTML = "HTML";

                // 确保添加到适当的位置
                const codeBlockGroup = toolbar.querySelector(".ql-code-block");
                if (codeBlockGroup) {
                  codeBlockGroup.parentNode.insertBefore(
                    button,
                    codeBlockGroup.nextSibling
                  );
                } else {
                  toolbar.appendChild(button);
                }
              }
            }
          } else {
            const button = editorContainer4.value.querySelector(`.ql-${key}`);
            if (button) button.title = value;
          }
        });

        // 初始化下拉菜单默认文本
        const fontPicker = document.querySelector(".ql-font .ql-picker-label");
        const sizePicker = document.querySelector(".ql-size .ql-picker-label");
        const headerPicker = document.querySelector(
          ".ql-header .ql-picker-label"
        );
        const alignPicker = document.querySelector(
          ".ql-align .ql-picker-label"
        );

        if (fontPicker) fontPicker.innerHTML = "字体";
        if (sizePicker) sizePicker.innerHTML = "字号";
        if (headerPicker) headerPicker.innerHTML = "格式";
        if (alignPicker) alignPicker.innerHTML = "对齐";

        // 初始化汉化
        fullLocalization();

        // 内容变化时重新汉化
        quillInstances.value.on("editor-change", () => {
          fullLocalization();
          forms.goods_info = quillInstances.value.root.innerHTML;
        });
      } catch (e) {
        console.error("编辑器初始化失败:", e);
       
      }
      console.log('Quill实例:', quillInstances.value)
    }, 50);
  });
  
}


//批量注意事项

function initQuills() {
  // 1. 预加载CSS强制覆盖
  forceChineseCSS();

  // 2. 增强版汉化配置
  const ChineseLabels = {
    fonts: {
      "sans-serif": "默认",
      SimSun: "宋体",
      SimHei: "黑体",
      "Microsoft-YaHei": "微软雅黑",
      KaiTi: "楷体",
      FangSong: "仿宋",
      Arial: "Arial",
      "Times-New-Roman": "Times New Roman",
      "Courier-New": "Courier New",
    },
    sizes: {
      "10px": "小五",
      "12px": "小四",
      "14px": "小三",
      "16px": "小二",
      "18px": "小一",
      "24px": "二号",
      "36px": "一号",
    },
    formats: {
      normal: "正文",
      h1: "标题1",
      h2: "标题2",
      h3: "标题3",
      h4: "标题4",
      h5: "标题5",
      h6: "标题6",
    },
    toolbarTexts: {
      bold: "加粗",
      italic: "斜体",
      underline: "下划线",
      strike: "删除线",
      blockquote: "引用",
      code: "代码",
      list: "列表",
      ordered: "有序列表",
      bullet: "无序列表",
      script: "上下标",
      sub: "下标",
      super: "上标",
      indent: "缩进",
      direction: "方向",
      align: "对齐",
      link: "链接",
      image: "图片",
      video: "视频",
      clean: "清除格式",
      color: "文字颜色",
      background: "背景色",
      formula: "公式",
      font: "字体",
      size: "字号",
    },
  };

  // 注册字体和字号格式器
  const FontAttributor = Quill.import("attributors/class/font");
  FontAttributor.whitelist = Object.keys(ChineseLabels.fonts);
  Quill.register(FontAttributor, true);

  const SizeAttributor = Quill.import("attributors/class/size");
  SizeAttributor.whitelist = Object.keys(ChineseLabels.sizes);
  Quill.register(SizeAttributor, true);

  // 3. 完整汉化函数
  const fullLocalization = () => {
    // 字体下拉菜单汉化
    const fontPicker = editorContainers.value.querySelector(".ql-font");
    if (fontPicker) {
      document.querySelectorAll(".ql-font .ql-picker-item").forEach((item) => {
        const fontValue = item.getAttribute("data-value");
        if (fontValue && ChineseLabels.fonts[fontValue]) {
          item.innerHTML = ChineseLabels.fonts[fontValue];
          item.style.fontFamily = fontValue; // 确保预览效果正确
        }
      });

      const currentFont =
        quillInstances.value?.getFormat().font || "sans-serif";
      document.querySelector(".ql-font .ql-picker-label").innerHTML =
        ChineseLabels.fonts[currentFont] || "字体";
    }

    // 字号下拉菜单汉化
    const sizePicker = editorContainers.value.querySelector(".ql-size");
    if (sizePicker) {
      document.querySelectorAll(".ql-size .ql-picker-item").forEach((item) => {
        const sizeValue = item.getAttribute("data-value");
        if (sizeValue && ChineseLabels.sizes[sizeValue]) {
          item.innerHTML = ChineseLabels.sizes[sizeValue];
          item.style.fontSize = sizeValue; // 确保预览效果正确
        }
      });

      const currentSize =
        quillInstances.value?.getFormat().size ||
        Object.keys(ChineseLabels.sizes)[1];
      document.querySelector(".ql-size .ql-picker-label").innerHTML =
        ChineseLabels.sizes[currentSize] || "字号";
    }

    // 标题格式下拉菜单汉化
    const headerPicker = editorContainers.value.querySelector(".ql-header");
    if (headerPicker) {
      document
        .querySelectorAll(".ql-header .ql-picker-item")
        .forEach((item) => {
          const formatValue = item.getAttribute("data-value");
          if (formatValue && ChineseLabels.formats[formatValue]) {
            item.innerHTML = ChineseLabels.formats[formatValue];
          }
        });

      const currentFormat =
        quillInstances.value?.getFormat().header || "normal";
      document.querySelector(".ql-header .ql-picker-label").innerHTML =
        ChineseLabels.formats[`h${currentFormat}`] || "格式";
    }
  };

  // 4. 初始化流程（优化版）
  nextTick(() => {
    setTimeout(() => {
      console.log('Checking if container exists:', editorContainers.value);
      console.log('Checking if Quill exists:', typeof Quill);
      try {
        const Parchment = Quill.import("parchment");
        const Inline = Quill.import("blots/inline");
        const CodeBlock = Quill.import("formats/code-block");
        Quill.register(CodeBlock, true);

        const Font = Quill.import("formats/font");
        Font.whitelist = [
          "SimSun",
          "SimHei",
          "Microsoft-YaHei",
          "KaiTi",
          "FangSong",
        ];
        Quill.register(Font, true);
        const Size = Quill.import("attributors/style/size");
        Size.whitelist = ["10px", "12px", "14px", "16px", "18px"];
        Quill.register(Size, true);

        // 自定义代码格式
        class CodeBlot extends Inline {
          static create(value) {
            const node = super.create();
            node.setAttribute("class", "ql-code");
            return node;
          }
        }
        CodeBlot.blotName = "code";
        CodeBlot.tagName = ["code"];
        Quill.register(CodeBlot);
        // 注册代码块格式
        // const CodeBlock = Quill.import('formats/code-block');
        // Quill.register(CodeBlock, true);

        // 销毁旧实例
        if (quillInstances.value) quillInstances.value.destroy();
        // 3. 创建HTML按钮自定义处理函数
     
        const htmlHandler = () => {
          console.log('批量测试',quillInstances.value)
          state.piliangHtmlShow=true
          if (!quillInstances.value) return;
          console.log('22222')
          const range = quillInstances.value.getSelection();
          if (!range) return;
          
          const selectedText = quillInstances.value.getText(range.index, range.length);
          console.log('dddddd11111',selectedText)
          if (selectedText) {
            // 如果有选中文本，将选中文本转为HTML代码块
            const htmlContent = `<pre><code>${selectedText}</code></pre>`;
            quillInstances.value.deleteText(range.index, range.length);
            quillInstances.value.clipboard.dangerouslyPasteHTML(range.index, htmlContent);
          } else {
            // 如果没有选中文本，插入HTML代码块模板
            const htmlTemplate = `<pre><code><!-- 在此输入HTML代码 --></code></pre>`;
            quillInstances.value.clipboard.dangerouslyPasteHTML(range.index, htmlTemplate);
            // 将光标定位到可编辑区域
            quillInstances.value.setSelection(range.index + 4, 0);
          }
        };


        // 创建新实例
        quillInstances.value = new Quill(editorContainers.value, {
          theme: "snow",
          bounds: editorContainers.value,
          modules: {
            toolbar: {
              container: [
                ["code-block"], // 代码块按钮
                ["html-code"], // 自定义HTML按钮
                ["bold", "italic", "underline"],
                ["bold", "italic", "underline", "strike"],
                [{ header: [1, 2, 3, 4, 5, 6, false] }],
                [
                  { font: Object.keys(ChineseLabels.fonts) },
                  { size: Object.keys(ChineseLabels.sizes) },
                ],
                [{ color: [] }, { background: [] }],
                [{ script: "sub" }, { script: "super" }],
                [{ list: "ordered" }, { list: "bullet" }],
                [{ indent: "-1" }, { indent: "+1" }],
                [{ direction: "rtl" }, { align: [] }],
                ["blockquote", "code-block", "html-code"], // 添加自定义HTML按钮
                ["link", "image", "video", "formula"],
                ["clean"],
                
              ],
              handlers: {
                "html-code": htmlHandler, // 注册HTML按钮处理函数
              },
            },
            syntax: true, // 启用代码高亮
            clipboard: {
              matchVisual: false, // 防止粘贴时格式错乱
            },
          },

          formats: [
            "code",
            "code-block", // 确保code格式在允许的格式列表中
            "bold",
            "italic",
            "underline",
            "strike",
            "font",
            "size",
            "header",
            "script",
            "blockquote",
            "code-block",
            "list",
            "bullet",
            "ordered",
            "indent",
            "link",
            "image",
            "video",
            "color",
            "background",
            "align",
            "direction",
            "formula",
          ],
          placeholder: "请输入内容...",
        });

        const addHtmlButton = () => {
          console.log("11111");
          const toolbar = editorContainers.value.querySelector(".ql-toolbar");
          if (!toolbar) return;

          const htmlButton = document.createElement("button");
          htmlButton.className = "ql-html-code";
          htmlButton.innerHTML = '<i class="icon-code"></i>';
          htmlButton.title = "转换HTML/代码";
          htmlButton.onclick = (e) => {
            e.preventDefault();
            htmlHandler();
          };
          const codeBlockGroup = toolbar.querySelector(".ql-code-block");
          if (codeBlockGroup) {
            codeBlockGroup.parentNode.insertBefore(
              htmlButton,
              codeBlockGroup.nextSibling
            );
          } else {
            toolbar.appendChild(htmlButton);
          }
        };
        // 延迟添加按钮确保DOM加载完成
        setTimeout(addHtmlButton, 100);

        // 初始化工具栏汉化
        const initialToolbarTexts = {
          "html-code": "HTML代码",
          bold: ChineseLabels.toolbarTexts.bold,
          italic: ChineseLabels.toolbarTexts.italic,
          underline: ChineseLabels.toolbarTexts.underline,
          strike: ChineseLabels.toolbarTexts.strike,
          blockquote: ChineseLabels.toolbarTexts.blockquote,
          code: ChineseLabels.toolbarTexts.code,
          list: ChineseLabels.toolbarTexts.list,
          ordered: ChineseLabels.toolbarTexts.ordered,
          bullet: ChineseLabels.toolbarTexts.bullet,
          script: ChineseLabels.toolbarTexts.script,
          indent: ChineseLabels.toolbarTexts.indent,
          direction: ChineseLabels.toolbarTexts.direction,
          align: ChineseLabels.toolbarTexts.align,
          link: ChineseLabels.toolbarTexts.link,
          image: ChineseLabels.toolbarTexts.image,
          video: ChineseLabels.toolbarTexts.video,
          clean: ChineseLabels.toolbarTexts.clean,
          color: ChineseLabels.toolbarTexts.color,
          background: ChineseLabels.toolbarTexts.background,
          formula: ChineseLabels.toolbarTexts.formula,
        };

        Object.entries(initialToolbarTexts).forEach(([key, value]) => {
          if (key === "html-code") {
            const toolbar = editorContainers.value.querySelector(".ql-toolbar");
            if (toolbar) {
              // 检查按钮是否已经存在
              let button = toolbar.querySelector(".ql-html-code");
              if (!button) {
                button = document.createElement("button");
                button.className = "ql-html-code";
                button.title = value;
                button.innerHTML = "HTML";

                // 确保添加到适当的位置
                const codeBlockGroup = toolbar.querySelector(".ql-code-block");
                if (codeBlockGroup) {
                  codeBlockGroup.parentNode.insertBefore(
                    button,
                    codeBlockGroup.nextSibling
                  );
                } else {
                  toolbar.appendChild(button);
                }
              }
            }
          } else {
            const button = editorContainers.value.querySelector(`.ql-${key}`);
            if (button) button.title = value;
          }
        });

        // 初始化下拉菜单默认文本
        const fontPicker = document.querySelector(".ql-font .ql-picker-label");
        const sizePicker = document.querySelector(".ql-size .ql-picker-label");
        const headerPicker = document.querySelector(
          ".ql-header .ql-picker-label"
        );
        const alignPicker = document.querySelector(
          ".ql-align .ql-picker-label"
        );

        if (fontPicker) fontPicker.innerHTML = "字体";
        if (sizePicker) sizePicker.innerHTML = "字号";
        if (headerPicker) headerPicker.innerHTML = "格式";
        if (alignPicker) alignPicker.innerHTML = "对齐";

        // 初始化汉化
        fullLocalization();

        // 内容变化时重新汉化
        quillInstances.value.on("editor-change", () => {
          fullLocalization();
          forms.goods_info = quillInstances.value.root.innerHTML;
        });
      } catch (e) {
        console.error("编辑器初始化失败:", e);
      
      }
      console.log('Quill实例:', quillInstances.value)
    }, 50);
  });
  
}




//批量商品详情

function initQuillss() {
  // 1. 预加载CSS强制覆盖
  forceChineseCSS();

  // 2. 增强版汉化配置
  const ChineseLabels = {
    fonts: {
      "sans-serif": "默认",
      SimSun: "宋体",
      SimHei: "黑体",
      "Microsoft-YaHei": "微软雅黑",
      KaiTi: "楷体",
      FangSong: "仿宋",
      Arial: "Arial",
      "Times-New-Roman": "Times New Roman",
      "Courier-New": "Courier New",
    },
    sizes: {
      "10px": "小五",
      "12px": "小四",
      "14px": "小三",
      "16px": "小二",
      "18px": "小一",
      "24px": "二号",
      "36px": "一号",
    },
    formats: {
      normal: "正文",
      h1: "标题1",
      h2: "标题2",
      h3: "标题3",
      h4: "标题4",
      h5: "标题5",
      h6: "标题6",
    },
    toolbarTexts: {
      bold: "加粗",
      italic: "斜体",
      underline: "下划线",
      strike: "删除线",
      blockquote: "引用",
      code: "代码",
      list: "列表",
      ordered: "有序列表",
      bullet: "无序列表",
      script: "上下标",
      sub: "下标",
      super: "上标",
      indent: "缩进",
      direction: "方向",
      align: "对齐",
      link: "链接",
      image: "图片",
      video: "视频",
      clean: "清除格式",
      color: "文字颜色",
      background: "背景色",
      formula: "公式",
      font: "字体",
      size: "字号",
    },
  };

  // 注册字体和字号格式器
  const FontAttributor = Quill.import("attributors/class/font");
  FontAttributor.whitelist = Object.keys(ChineseLabels.fonts);
  Quill.register(FontAttributor, true);

  const SizeAttributor = Quill.import("attributors/class/size");
  SizeAttributor.whitelist = Object.keys(ChineseLabels.sizes);
  Quill.register(SizeAttributor, true);

  // 3. 完整汉化函数
  const fullLocalization = () => {
    // 字体下拉菜单汉化
    const fontPicker = richTextEditor.value.querySelector(".ql-font");
    if (fontPicker) {
      document.querySelectorAll(".ql-font .ql-picker-item").forEach((item) => {
        const fontValue = item.getAttribute("data-value");
        if (fontValue && ChineseLabels.fonts[fontValue]) {
          item.innerHTML = ChineseLabels.fonts[fontValue];
          item.style.fontFamily = fontValue; // 确保预览效果正确
        }
      });

      const currentFont =
        quillInstances.value?.getFormat().font || "sans-serif";
      document.querySelector(".ql-font .ql-picker-label").innerHTML =
        ChineseLabels.fonts[currentFont] || "字体";
    }

    // 字号下拉菜单汉化
    const sizePicker = richTextEditor.value.querySelector(".ql-size");
    if (sizePicker) {
      document.querySelectorAll(".ql-size .ql-picker-item").forEach((item) => {
        const sizeValue = item.getAttribute("data-value");
        if (sizeValue && ChineseLabels.sizes[sizeValue]) {
          item.innerHTML = ChineseLabels.sizes[sizeValue];
          item.style.fontSize = sizeValue; // 确保预览效果正确
        }
      });

      const currentSize =
        quillInstances.value?.getFormat().size ||
        Object.keys(ChineseLabels.sizes)[1];
      document.querySelector(".ql-size .ql-picker-label").innerHTML =
        ChineseLabels.sizes[currentSize] || "字号";
    }

    // 标题格式下拉菜单汉化
    const headerPicker = richTextEditor.value.querySelector(".ql-header");
    if (headerPicker) {
      document
        .querySelectorAll(".ql-header .ql-picker-item")
        .forEach((item) => {
          const formatValue = item.getAttribute("data-value");
          if (formatValue && ChineseLabels.formats[formatValue]) {
            item.innerHTML = ChineseLabels.formats[formatValue];
          }
        });

      const currentFormat =
        quillInstances.value?.getFormat().header || "normal";
      document.querySelector(".ql-header .ql-picker-label").innerHTML =
        ChineseLabels.formats[`h${currentFormat}`] || "格式";
    }
  };

  // 4. 初始化流程（优化版）
  nextTick(() => {
    setTimeout(() => {
      console.log('Checking if container exists:', richTextEditor.value);
      console.log('Checking if Quill exists:', typeof Quill);
      try {
        const Parchment = Quill.import("parchment");
        const Inline = Quill.import("blots/inline");
        const CodeBlock = Quill.import("formats/code-block");
        Quill.register(CodeBlock, true);

        const Font = Quill.import("formats/font");
        Font.whitelist = [
          "SimSun",
          "SimHei",
          "Microsoft-YaHei",
          "KaiTi",
          "FangSong",
        ];
        Quill.register(Font, true);
        const Size = Quill.import("attributors/style/size");
        Size.whitelist = ["10px", "12px", "14px", "16px", "18px"];
        Quill.register(Size, true);

        // 自定义代码格式
        class CodeBlot extends Inline {
          static create(value) {
            const node = super.create();
            node.setAttribute("class", "ql-code");
            return node;
          }
        }
        CodeBlot.blotName = "code";
        CodeBlot.tagName = ["code"];
        Quill.register(CodeBlot);
        // 注册代码块格式
        // const CodeBlock = Quill.import('formats/code-block');
        // Quill.register(CodeBlock, true);

        // 销毁旧实例
        if (quillInstances.value) quillInstances.value.destroy();
        // 3. 创建HTML按钮自定义处理函数
     
        const htmlHandler = () => {
          console.log('商品修改详情',quillInstances.value)
          piliangHtmlShow2.value=true
          if (!quillInstances.value) return;
          console.log('22222')
          const range = quillInstances.value.getSelection();
          if (!range) return;
          
          const selectedText = quillInstances.value.getText(range.index, range.length);
          console.log('dddddd11111',selectedText)
          if (selectedText) {
            // 如果有选中文本，将选中文本转为HTML代码块
            const htmlContent = `<pre><code>${selectedText}</code></pre>`;
            quillInstances.value.deleteText(range.index, range.length);
            quillInstances.value.clipboard.dangerouslyPasteHTML(range.index, htmlContent);
          } else {
            // 如果没有选中文本，插入HTML代码块模板
            const htmlTemplate = `<pre><code><!-- 在此输入HTML代码 --></code></pre>`;
            quillInstances.value.clipboard.dangerouslyPasteHTML(range.index, htmlTemplate);
            // 将光标定位到可编辑区域
            quillInstances.value.setSelection(range.index + 4, 0);
          }
        };


        // 创建新实例
        quillInstances.value = new Quill(richTextEditor.value, {
          theme: "snow",
          bounds: richTextEditor.value,
          modules: {
            toolbar: {
              container: [
                ["code-block"], // 代码块按钮
                ["html-code"], // 自定义HTML按钮
                ["bold", "italic", "underline"],
                ["bold", "italic", "underline", "strike"],
                [{ header: [1, 2, 3, 4, 5, 6, false] }],
                [
                  { font: Object.keys(ChineseLabels.fonts) },
                  { size: Object.keys(ChineseLabels.sizes) },
                ],
                [{ color: [] }, { background: [] }],
                [{ script: "sub" }, { script: "super" }],
                [{ list: "ordered" }, { list: "bullet" }],
                [{ indent: "-1" }, { indent: "+1" }],
                [{ direction: "rtl" }, { align: [] }],
                ["blockquote", "code-block", "html-code"], // 添加自定义HTML按钮
                ["link", "image", "video", "formula"],
                ["clean"],
                
              ],
              handlers: {
                "html-code": htmlHandler, // 注册HTML按钮处理函数
              },
            },
            syntax: true, // 启用代码高亮
            clipboard: {
              matchVisual: false, // 防止粘贴时格式错乱
            },
          },

          formats: [
            "code",
            "code-block", // 确保code格式在允许的格式列表中
            "bold",
            "italic",
            "underline",
            "strike",
            "font",
            "size",
            "header",
            "script",
            "blockquote",
            "code-block",
            "list",
            "bullet",
            "ordered",
            "indent",
            "link",
            "image",
            "video",
            "color",
            "background",
            "align",
            "direction",
            "formula",
          ],
          placeholder: "请输入内容...",
        });

        const addHtmlButton = () => {
          console.log("11111");
          const toolbar = richTextEditor.value.querySelector(".ql-toolbar");
          if (!toolbar) return;

          const htmlButton = document.createElement("button");
          htmlButton.className = "ql-html-code";
          htmlButton.innerHTML = '<i class="icon-code"></i>';
          htmlButton.title = "转换HTML/代码";
          htmlButton.onclick = (e) => {
            e.preventDefault();
            htmlHandler();
          };
          const codeBlockGroup = toolbar.querySelector(".ql-code-block");
          if (codeBlockGroup) {
            codeBlockGroup.parentNode.insertBefore(
              htmlButton,
              codeBlockGroup.nextSibling
            );
          } else {
            toolbar.appendChild(htmlButton);
          }
        };
        // 延迟添加按钮确保DOM加载完成
        setTimeout(addHtmlButton, 100);

        // 初始化工具栏汉化
        const initialToolbarTexts = {
          "html-code": "HTML代码",
          bold: ChineseLabels.toolbarTexts.bold,
          italic: ChineseLabels.toolbarTexts.italic,
          underline: ChineseLabels.toolbarTexts.underline,
          strike: ChineseLabels.toolbarTexts.strike,
          blockquote: ChineseLabels.toolbarTexts.blockquote,
          code: ChineseLabels.toolbarTexts.code,
          list: ChineseLabels.toolbarTexts.list,
          ordered: ChineseLabels.toolbarTexts.ordered,
          bullet: ChineseLabels.toolbarTexts.bullet,
          script: ChineseLabels.toolbarTexts.script,
          indent: ChineseLabels.toolbarTexts.indent,
          direction: ChineseLabels.toolbarTexts.direction,
          align: ChineseLabels.toolbarTexts.align,
          link: ChineseLabels.toolbarTexts.link,
          image: ChineseLabels.toolbarTexts.image,
          video: ChineseLabels.toolbarTexts.video,
          clean: ChineseLabels.toolbarTexts.clean,
          color: ChineseLabels.toolbarTexts.color,
          background: ChineseLabels.toolbarTexts.background,
          formula: ChineseLabels.toolbarTexts.formula,
        };

        Object.entries(initialToolbarTexts).forEach(([key, value]) => {
          if (key === "html-code") {
            const toolbar = richTextEditor.value.querySelector(".ql-toolbar");
            if (toolbar) {
              // 检查按钮是否已经存在
              let button = toolbar.querySelector(".ql-html-code");
              if (!button) {
                button = document.createElement("button");
                button.className = "ql-html-code";
                button.title = value;
                button.innerHTML = "HTML";

                // 确保添加到适当的位置
                const codeBlockGroup = toolbar.querySelector(".ql-code-block");
                if (codeBlockGroup) {
                  codeBlockGroup.parentNode.insertBefore(
                    button,
                    codeBlockGroup.nextSibling
                  );
                } else {
                  toolbar.appendChild(button);
                }
              }
            }
          } else {
            const button = richTextEditor.value.querySelector(`.ql-${key}`);
            if (button) button.title = value;
          }
        });

        // 初始化下拉菜单默认文本
        const fontPicker = document.querySelector(".ql-font .ql-picker-label");
        const sizePicker = document.querySelector(".ql-size .ql-picker-label");
        const headerPicker = document.querySelector(
          ".ql-header .ql-picker-label"
        );
        const alignPicker = document.querySelector(
          ".ql-align .ql-picker-label"
        );

        if (fontPicker) fontPicker.innerHTML = "字体";
        if (sizePicker) sizePicker.innerHTML = "字号";
        if (headerPicker) headerPicker.innerHTML = "格式";
        if (alignPicker) alignPicker.innerHTML = "对齐";

        // 初始化汉化
        fullLocalization();

        // 内容变化时重新汉化
        quillInstances.value.on("editor-change", () => {
          fullLocalization();
          forms.goods_info = quillInstances.value.root.innerHTML;
        });
      } catch (e) {
        console.error("编辑器初始化失败:", e);
        
      }
      console.log('Quill实例:', quillInstances.value)
    }, 50);
  });
  
}








// 终极CSS覆盖方案
function forceChineseCSS() {
  const styleId = "quill-chinese-override-ultimate";
  if (document.getElementById(styleId)) return;

  const style = document.createElement("style");
  style.id = styleId;
  style.innerHTML = `
    /* ------ 全局覆盖 ------ */
    .ql-snow .ql-picker-label::before,
    .ql-snow .ql-picker-item::before {
      content: attr(data-value) !important;
    }
    
    /* 标题选择器 */
    .ql-snow .ql-picker.ql-header .ql-picker-label::before {
      content: "段落样式" !important;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before {
      content: "标题1" !important;
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before {
      content: "标题2" !important;
    }
    
    /* 字体选择器 */
    .ql-snow .ql-picker.ql-font .ql-picker-label::before {
      content: "字体" !important;
    }
    
    /* 字号选择器 */
    .ql-snow .ql-picker.ql-size .ql-picker-label::before {
      content: "字号" !important;
    }
  `;
  document.head.appendChild(style);
}

// 1. 将处理函数移到外部以便重用
function htmlCodeHandler() {
  const range = this.quill.getSelection();
  if (range) {
    if (range.length > 0) {
      // 方案一：转为代码块（块级元素）
      this.quill.formatText(range.index, range.length, {
        "code-block": true,
      });

      // 或者方案二：转为行内代码（更类似HTML中的<code>）
      // this.quill.formatText(range.index, range.length, 'code', true);

      // 或者方案三：插入实际HTML代码
      // const selectedText = this.quill.getText(range.index, range.length);
      // this.quill.deleteText(range.index, range.length);
      // this.quill.insertEmbed(range.index, 'code-block', selectedText);
    } else {
      // 插入空的代码块
      this.quill.insertText(range.index, "请在此输入代码", "code");
      this.quill.setSelection(range.index + 9, 0);
    }
  }
}

function observePickerChanges() {
  const observer = new MutationObserver((mutations) => {
    mutations.forEach(() => {
      // 延迟执行确保DOM更新完成
      setTimeout(() => {
        overrideLabels();
        forceChineseCSS();
      }, 100);
    });
  });

  const config = {
    childList: true,
    subtree: true,
    attributes: true,
  };

  if (editorContainers.value) {
    observer.observe(editorContainers.value, config);
  }
}

// 在初始化后调用
nextTick(() => {
  observePickerChanges();
});

//富文本详情
function initQuills2() {
  console.log("为什么先走这个符文布");
  try {
    // 检查DOM元素是否存在
    if (!editorContainers.value) throw new Error("DOM容器未就绪");

    // 初始化Quill实例，并保存到quillInstance
    quillInstances.value = new Quill(editorContainers.value, {
      theme: "snow",
      modules: {
        toolbar: [
          // 标题格式
          [{ header: [1, 2, 3, 4, 5, 6, false] }],

          // 基本文字格式
          ["bold", "italic", "underline", "strike"],

          // 文字颜色和背景色
          [{ color: [] }, { background: [] }],

          // 字体和字号
          [{ font: [] }, { size: ["small", false, "large", "huge"] }],

          // 列表
          [{ list: "ordered" }, { list: "bullet" }],

          // 对齐方式
          [{ align: [] }],

          // 缩进
          [{ indent: "-1" }, { indent: "+1" }],

          // 链接和图片
          ["link", "image", "video"],

          // 代码块、引用、公式
          ["code-block", "blockquote", "formula"],

          // 清除格式
          ["clean"],
        ],
      },
    });

    // 设置初始内容
    if (!quillInstances.value) {
      console.error("Quill实例未初始化");
      return "";
    }
    return quillInstances.value.root.innerHTML;

    // 监听编辑器的变化
    quillInstances.value.on("text-change", () => {
      if (ignoreInternalUpdate) return;
      const newHTML = quillInstance.value.root.innerHTML;

      if (editorContainers.value !== newHTML) {
        ignoreInternalUpdate = true;
        editorContainers.value = newHTML;
        ignoreInternalUpdate = false;
      }
    });
  } catch (e) {
    console.error("初始化Quill失败:", e);
    boboShow.value = true;
  }
}
const props = defineProps(["modelValue"]);
//批量修改注意事项
watch(
  () => props.modelValue,
  (newVal) => {
    if (!quillInstances.value || newVal === quillInstances.value.root.innerHTML)
      return;

    ignoreInternalUpdate = true;
    quillInstances.value.root.innerHTML = newVal || "";
    ignoreInternalUpdate = false;
  }
);

watch(editorContent, (newContent) => {
  if (!quillInstance.value || ignoreInternalUpdate) return;

  // 当外部修改editorContent时，更新编辑器
  const currentContent = quillInstance.value.root.innerHTML;

  // 避免相同内容重复设置
  if (currentContent !== newContent) {
    ignoreInternalUpdate = true;
    quillInstance.value.root.innerHTML = newContent;
    ignoreInternalUpdate = false;
  }
});

//批量编辑商品
function piShow() {
  shangpingShow.value = true;
}
//批量修改成本定价
function btngoodsPriceShow() {

  if (goodsPrice.value == "") {
    ElMessage({
      message: "定价成本不能为空",
      type: "error",
    });
    return;
  }

  goodsPriceShow.value = false;
  let parm = {
    goodsPrice: goodsPrice.value,
    ids: tabslistss2.value,
  };
  editGoodsPriceForIds(parm).then((res) => {
    console.log("res", res);
    if (res.code == 200) {
      shangpingShow9ss.value = false;
      getSetdocking();
      ElMessage({
        message: res.msg,
        type: "success",
      });
    }
  });
}

//查询
function submitSee() {
  console.log("erer");
  getSetdocking();
}
//重置
const _key_type=ref("1")
function openChong(){
  _key_word.value=''
  _goods_status.value=''
  _key_type.value='1'
  currentPage.value=1
  _goods_type.value='-1'
  _goods_status.value='-1'
  provide_types.value='-1'
  getSetdocking()
}
const _key_word=ref('')
const _goods_status=ref("-1")
const _goods_type=ref("-1")
const _stock_state=ref("")
const _template_state=ref("")
const _dir_state=ref("")
const fcid=ref("")
const scid=ref("")
//初始化列表
function getSetdocking() {
  // 显示 loading
  const loadingInstance = ElLoading.service({
    target: ".el-dialog", // 针对对话框区域
    lock: true,
    text: "正在加载数据中...",
    background: "rgba(0, 0, 0, 0.7)",
  });
  let parm = {
    page: currentPage.value,
    limit: pageSize.value,
    _key_word:_key_word.value,
    _goods_status:_goods_status.value,
    _key_type:_key_type.value,
    _goods_type:_goods_type.value,
    _stock_state:_stock_state.value,
    _template_state:_template_state.value,
    _dir_state:_dir_state.value,
    fcid:fcid.value,
    scid:scid.value,
    provide_type:provide_types.value,
    dock_goods_id:dock_goods_id.value,
    for_user:for_user.value,
    dockId:dockId.value
  };
  getOrderList(parm)
    .then((res) => {
      if (res.code == 200) {
        dataList.value = res.data.data;
        total.value = Number(res.data.count);

        for (let item of dataList.value) {
          if (item.goods_imgs) {
            fileLists2.value = item.goods_imgs.split(",").map((url) => ({
              url: url.trim(),
              name: url.split("/").pop(),
              status: "success",
            }));
          }

          item.cost_value = parseFloat(item.cost_value).toFixed(2);
          item.face_value = parseFloat(item.face_value).toFixed(2);

          if (item.provide_type == "2") {
            item.provide_type = "比价通";
          } else if (item.provide_type == "3") {
            item.provide_type = "一键通";
          } else if (item.provide_type == "4") {
            item.provide_type = "平台间对接";
          } else if (item.provide_type == "5") {
            item.provide_type = "商家供货";
          }

          if (item.provide_type == "1") {
            if (item.docking_id !== null && item.docking_id !== 0) {
              item.provide_type = "渠道";
              console.log("走渠道");
            } else {
              item.provide_type = "自营";
              console.log("还是走自营");
            }
          }

          if (item.status == "1") {
            item.status = "销售";
          } else if (item.status == "2") {
            item.status = "暂停";
          } else if (item.status == "3") {
            item.status = "禁售";
          }
          if (item.goods_type == "1") {
            item.goods_type = "卡密商品";
          } else if (item.goods_type == "2") {
            item.goods_type = "充值商品";
          } else if (item.goods_type == "3") {
            item.goods_type = "实物商品";
          } else if (item.goods_type == "4") {
            item.goods_type = "29wk";
          }
        }

        console.log("列表是什么", dataList.value);
      }
    })
    .finally(() => {
      // 数据加载完成后关闭 loading
      loadingInstance.close();
    });
}

//右边弹出框的内容
const xiayibuShow = ref(true);
const shoppingState = ref(3);
//上一步
function btnShang() {
  activeTab.value -= 1;
  if (activeTab.value == 3) {
    xiayibuShow.value = true;
  }
}
const cascaderProps = {
  expandTrigger: "hover", // 鼠标悬停展开子级
};

//下一步
function btnOne() {
  activeTab.value += 1;
  if (activeTab.value == 4) {
    xiayibuShow.value = false;
  } else {
    xiayibuShow.value = true;
  }
}
</script>
<style>
.el-sub-menu .el-sub-menu__icon-arrow {
  position: absolute;
  left: 68px;
}
.el-divider el-divider--horizontal {
  border-top: none !important;
}
.el-divider--horizontal {
  border: none !important;
}
.el-menu--popup {
  min-width: 118px !important;
}
.el-menu--horizontal > .el-sub-menu .el-sub-menu__title {
  border-bottom: none !important;
}

/* 字体选择器汉化 */
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before {
  content: "宋体" !important;
  font-family: "SimSun", "宋体" !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线体" !important;
  font-family: "SimSun", "衬线体" !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体" !important;
  font-family: "SimSun", "等宽字体" !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "微软雅黑" !important;
  font-family: "SimSun", "微软雅黑" !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "新罗马" !important;
  font-family: "SimSun", "新罗马" !important;
}
/* 标题选择器汉化 */
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1" !important;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2" !important;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3" !important;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=""]::before {
  content: "正文" !important;
}
.ql-editor {
  font-family: "Microsoft YaHei", "微软雅黑" !important;
}
/* 字体下拉汉化强制覆盖 */
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before {
  content: "宋体" !important;
  font-family: "SimSun", "宋体" !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线体" !important;
  font-family: "Serif", "衬线体" !important;
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体" !important;
  font-family: "Monospace", "等宽字体" !important;
}

/* 字体预览样式 */
.ql-font-SimSun {
  font-family: "SimSun" !important;
}
.ql-font-SimHei {
  font-family: "SimHei" !important;
}
.ql-font-Microsoft-YaHei {
  font-family: "Microsoft YaHei" !important;
}
.ql-font-KaiTi {
  font-family: "KaiTi" !important;
}
.ql-font-FangSong {
  font-family: "FangSong" !important;
}
.ql-font-Arial {
  font-family: "Arial" !important;
}
.ql-font-Times-New-Roman {
  font-family: "Times New Roman" !important;
}
.ql-font-Courier-New {
  font-family: "Courier New" !important;
}

/* 字号预览样式 */
.ql-size-10px {
  font-size: 10px !important;
}
.ql-size-12px {
  font-size: 12px !important;
}
.ql-size-14px {
  font-size: 14px !important;
}
.ql-size-16px {
  font-size: 16px !important;
}
.ql-size-18px {
  font-size: 18px !important;
}
.ql-size-24px {
  font-size: 24px !important;
}
.ql-size-36px {
  font-size: 36px !important;
}

.ql-html-code {
  width: 50px !important;
}

.ql-html-code:after {
  content: "HTML";
  font-size: 12px;
}

.ql-snow .ql-code {
  background-color: #f5f5f5;
  border-radius: 3px;
  padding: 2px 4px;
  font-family: monospace;
}

.ql-snow .ql-code-block {
  background-color: #f5f5f5;
  border-radius: 3px;
  padding: 12px;
  font-family: monospace;
  white-space: pre;
  margin: 12px 0;
}
.el-textarea__inner{
  height: 300px !important;
}
</style>
<style scoped>
.el-menu--popup {
  min-width: 118px !important;
}

:deep(.el-cascader-menu) {
  width: 60px; /* 每列宽度 */
}
:deep.el-divider--horizontal {
  border: none !important;
}

.kucun-footer {
  display: flex;
  margin-top: 12px;
  justify-content: center;
}
.footers-see {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}
.kamiok {
  margin-top: 23px;
  display: flex;
  justify-content: center;
}
.cengben {
  margin-top: 12px;
}
.daoru {
  display: inline-block;
  position: relative;
  top: 2px;
  left: 12px;
  margin-top: 12px;
}
.selectname {
  font-size: 12px;
  color: #3333;
  margin-left: 64px;
}
.inputs {
  margin-top: 12px;
}
.activeIndex {
  background-color: #1890ff !important;
  color: white !important;
  border: 1px solid #1890ff !important;
}
.tabs-kucun {
  display: flex;
  position: relative;
  margin-left: 12px;
  top: -6px;
}
.bendi {
  border: 1px solid #3333;
  width: 80px;
  height: 27px;
  line-height: 27px;
  text-align: center;
  cursor: pointer;
  font-size: 13px;
}
.heng {
  width: 100%;
  height: 1px;
  background-color: #3333;
  margin-top: 16px;
}
.dingjia-type {
  margin-left: 12px;
  position: relative;
  top: 2px;
}
.price-input {
  width: 80%;
  margin-left: 12px;
}

.order-name {
  cursor: pointer;
  color: #1890ff;
}
.icon-type {
  color: #1890ff;
  position: relative;
  top: 2px;
  cursor: pointer;
}
.shop-name {
  margin-top: 20px;
}
.moban {
  color: #1890ff;
  cursor: pointer;
  font-size: 12px;
  margin-left: 12px;
}
.shop-detail {
  position: absolute;
  right: 0;
  cursor: pointer;
  right: 12px;
  color: #1890ff;
}
.guanjians {
  margin-left: 20px;
  margin-top: 20px;
  font-size: 13px;
  position: relative;
}

.guanjian {
  margin-top: 12px;
}
.shop-conten {
  width: 96%;
  margin: 0 auto;
}
.title-header {
  width: 100%;
  padding-bottom: 20px;
  background-color: #e8f4ff;
  border: 1px solid #1890ff;
}
.nameshopping {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 200px;
  cursor: pointer;
}
.nameshopping:hover {
  color: #1890ff;
}
.paixu {
  margin-left: 20px;
  cursor: pointer;
  color: #1890ff;
}
.order-titme {
  margin-top: 10px;
}
.lie-input {
  width: 100%;
  background-color: white;
}
.iconss {
  color: #999;
  cursor: pointer;
  position: relative;
  top: 3px;
}

.iconss:hover {
  color: #1890ff;
}

.icons {
  font-size: 21px !important;
  position: relative !important;
  top: 18px !important;
  padding-right: 28px !important;
  left: 12px !important;
}

.icons2 {
  font-size: 50px !important;
  position: relative !important;
  top: 10px !important;
  padding-right: 28px !important;
  left: 12px !important;
}
.bitian {
  position: relative;
  left: -76px;
  top: 3px;
  color: red;
}
.shoujia {
  color: #13ce66;

  cursor: pointer;
}
.sanfang {
  margin-left: 12px;
  font-size: 11px;
  color: #1890ff;
  cursor: pointer;
}
.shangchuan {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}
.orders-names {
}
.el-sub-menu .el-sub-menu__icon-arrow {
}
.order-names {
  display: flex;
  margin-top: 15px;
}

.order-information {
}

.order-detail {
  height: 142px;
  border-bottom: 1px solid #3333;
  margin-top: 10px;
  font-size: 13px;
  padding-bottom: 14px;
}

.activeTab {
  border-bottom: 1px solid #1890ff !important;
  color: #1890ff !important;
}

.activeTabs {
  border-bottom: 1px solid #1890ff !important;
  color: #1890ff !important;
}
.ziying {
  background-color: #1890ff;
  color: white;
  width: 40px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 12px;
}
.kun-name {
  background-color: #13ce66;
  color: white;
  padding-left: 6px;
  padding-right: 6px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 12px;
}
.area-tab {
  display: flex;
  position: relative;
  left: -28px;
}
.area-tabs {
  height: 50vh;
  overflow: auto;
}
.imgList {
  display: flex;
  position: relative;
  left: -14px;
}
.img-xx {
  position: absolute;
  right: -15px;
  top: -13px;
  cursor: pointer;
  color: red;
}
.imgs2 {
  width: 42px;
  height: 42px;

  margin-left: 10px;
  position: relative;
}
.types-name {
  width: 73px;
  color: white;
  font-size: 10px;
  margin: 0 auto;
}
.area-name {
  margin-left: 30px;
  cursor: pointer;
  height: 31px;
}

.areas-header {
  height: 32px;
  border-bottom: 1px solid #3333;
  width: 100%;
}

.bianhao {
  margin-top: 16px;
  margin-left: 3px;
  font-size: 13px;
}

.right-name {
  margin-left: 8px;
}

.areas {
  width: 100%;
  margin: 0 auto;

  margin-top: 40px;
}

.quxiao {
  /* color: white;
		background-color: rgba(0, 0, 0, .65); */
  font-size: 12px;
  margin-top: 8px;
}

.type-name {
  margin-left: 150px;
}
.numers {
  font-size: 12px;
  color: #3333;

  margin-top: 5px;
}
.imgActive {
  border: 2px solid #1890ff !important;
}
.types {
  display: flex;
  margin-top: 30px;
  position: relative;
  left: -150px;
  font-size: 13px;
}
.el-sub-menu > .el-sub-menu__title {
  width: 80px !important;
}
/* 调整二级菜单项宽度 */
.el-menu--horizontal .el-menu-item {
  width: 80px !important;
}
.imgsleft {
  width: 70px;
  height: 70px;
}
.ql-html {
  display: inline-block !important;
}
.img-left {
  width: 9%;
}

.img-content {
  margin-top: 12px;
  display: flex;
}

.contents-title {
  display: flex;
  margin-top: 14vh;
  justify-content: space-between;
}

.unbers {
  color: #1890ff;
  background-color: #e8f4ff;
  border-color: #d1e9ff;
  margin-left: 12px;
  font-size: 11px;
  height: 22px;
  width: 56px;
  text-align: center;
}

.ordername {
  color: #333;
  border: 1px solid #3333;
  border-color: #333;
  /* padding: 1px 9px 1px 9px; */
  margin-left: 12px;
  height: 22px;
  width: 56px;
  text-align: center;
  font-size: 11px;
  line-height: 22px;
}

.kami {
  color: #13ce66;
  background-color: #e7faf0;
  border-color: #d0f5e0;
  font-size: 11px;
  height: 22px;
  width: 56px;
  text-align: center;
}
a {
  text-decoration: none;
  color: inherit;
}

.imgs {
  width: 50px;
  height: 50px;
  position: relative;
  top: 4px;
  border-radius: 6px;
}

.table-name {
  background-color: #13ce66;
  color: white;
  width: 60px;
  margin: 0 auto;
  cursor: pointer;
  font-size: 11px;
  text-align: center;
  height: 23px;
  line-height: 23px;
}

.table-name2 {
  border-color: rgba(0, 0, 0, 0.65);
  color: white;
  padding: 3px 5px 3px 9px;
  cursor: pointer;
}
.addfen {
  display: flex;
  justify-content: end;
  position: relative;
  top: 12px;
  right: 30px;
}
.img-arearight {
  margin-left: 26px;
}
.zanwu {
  margin-top: 30px;
  text-align: center;
}
.area-right {
  height: 53vh;
  margin-top: 20px;
  overflow: auto;
}
.right {
  flex: 1;
}
.left {
  width: 30%;
  padding-right: 20px;
}
.img-area {
  display: flex;
}
.mg-area {
  display: flex;
}
.img-left {
  width: 12%;
}
.img-right {
  flex: 1;
  padding-left: 30px;
}
.right-img {
  display: flex;
  flex-wrap: wrap;
}

.rightimg {
  margin-left: 10px;
  height: 80px;
  width: 80px;

  cursor: pointer;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

/* ✅ 只隐藏商品列表的图片上传按钮，不影响其他弹框 */
.table-area :deep(.el-upload--picture-card) {
  display: none !important;
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
  text-align: center;
}
.kami-type {
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  margin-top: 5px;
}
.zidong {
  font-size: 10px;
  text-align: center;
  color: #9999;
  position: relative;
  top: -12px;
}
.type-shop {
  width: 102px;
  height: 57px;
  border: 1px solid #3333;
  margin-left: 18px;
  border-radius: 4px;
  cursor: pointer;
}
.activeType {
  border: 1px solid #1890ff;
}
.content-type {
  display: flex;
  position: relative;
  left: -12px;
}
.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
.area-footer {
  border-top: 1px solid #3333;
  height: 30px;
  margin-top: 12px;
  padding-top: 12px;
  padding-bottom: 10px;
  display: flex;
  justify-content: center;
}
.footerss {
  display: flex;
  width: 96%;
  margin: 0 auto;
  font-size: 13px;
}

.footers {
  width: 98%;
  border: 1px solid #3333;
  margin: 0 auto;
  height: 100px;
  margin-top: 25px;
}

.tabname {
  color: #409eff !important;
  border-bottom: 2px solid #409eff !important;
}

.tab-name {
  margin-left: 18px;
  cursor: pointer;
  height: 30px;
}

.header-area {
  display: flex;
  position: relative;
  left: -18px;
  top: 1px;
}


.names {
  background: #409eff !important;
  color: white !important;
  border: none !important;
}

.jiaoyi {
  background-color: #13ce66;
}

.header-name {
  border-radius: 20px;
  padding: 3px 16px 3px 16px;
  border: 1px solid #9999;
  margin-left: 12px;
  font-size: 13px;
  cursor: pointer;
}

.headers {
  display: flex;
  padding-bottom: 12px;
}

.m-2 {
  width: 160px;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.configurations {
  margin-top: 12px;
}

.configuration-area {
}

.dialog-footer {
  margin: 0 auto;
  margin-top: 30px;
  text-align: center;
}

.orders-name {
  margin-top: 12px;
}

.orders {
  margin-left: 12px;
}

.order-area {
  width: 98%;
  padding-bottom: 12px;
  border: 1px solid #409eff;
  background-color: #e8f4ff;
}
.kucun {
  color: #1890ff;
  cursor: pointer;
}
.tabs-area {
  margin-top: 12px;
}
.lies {
  color: #1890ff;
  font-size: 12px;
  margin-left: 12px;
  display: inline-block;
}
.diolog-content {
}

.shu {
  width: 3px;
  height: 20px;
  background-color: #1890ff;
  position: relative;
  top: 19px;
}

.shuaxin {
  font-size: 12px;
  color: #409eff;
  padding-right: 2px;
  cursor: pointer;
}

.table-area {
  width: 98%;
  margin: 0 auto;
  margin-top: 30px;
}

.tabs-price {
  border: 1px solid #3333;
  padding: 5px 12px 3px 12px;
}

.timeShow {
  color: red !important;
}

.tabs {
  margin-left: 10px;
}

.tab-header {
  display: flex;
  width: 100%;
}
.lie-top {
  display: flex;

  flex-wrap: wrap;
}
.area {
  width: 100%;
  background-color: white;
  padding-bottom: 28px;
  margin-top: 18px;
  padding-top: 14px;
}

.content {
  width: 96%;
  margin: 0 auto;
  height: 80vh;
  margin-top: 26px;
}

.header {
  background-color: white;
  padding: 17px 0 1px 12px;
  border-radius: 8px;
}

.is-loading {
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 基础响应式设置 */
.content {
  width: 96%;
  margin: 0 auto;
  margin-top: 26px;
  padding-bottom: 20px;
}

/* 表格区域响应式 */
.table-area {
  width: 100%;
  margin: 0 auto;
  margin-top: 20px;
  overflow-x: auto;
}

/* 分页容器 */
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  overflow-x: auto;
}

/* 对话框内容 */
.diolog-content {
  padding: 10px;
}

/* 标签页区域 */
.tabs-area {
  margin-top: 12px;
}

/* 配置区域 */
.configurations {
  margin-top: 12px;
}

/* 对话框底部按钮 */
.dialog-footer {
  margin: 20px auto 0;
  text-align: center;
}

/* 订单区域 */
.order-area {
  width: 100%;
  padding: 12px;
  border: 1px solid #409eff;
  background-color: #e8f4ff;
  box-sizing: border-box;
}

.rightimg-wrapper {
  position: relative; /* 确保 yuan 绝对定位相对于此容器 */
  display: inline-block;
  margin: 24px;
  cursor: pointer;
}

.rightimg {
  width: 100px;
  height: auto;
  border: 2px solid transparent;
  transition: border-color 0.3s;
}

.imgActive {
  border-color: #409eff; /* 选中时高亮边框 */
}

.yuan {
  position: absolute;
  top: 24px;
  left: 85px;
  /* right: -49px; */
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f56c6c;
  color: white;
  text-align: center;
  line-height: 20px;
  font-size: 12px;
}

/* 刷新按钮样式 */
.shuaxin {
  font-size: 12px;
  color: #409eff;
  padding-right: 2px;
  cursor: pointer;
}

/* 加载动画 */
.is-loading {
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  /* 头部表单 */
  .header {
    padding: 10px;
  }

  /* 表单项目 */
  .el-form-item {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }

  /* 标签页 */
  .el-tabs {
    overflow-x: auto;
  }

  /* 对话框内容 */
  .diolog-content {
    padding: 5px;
  }

  /* 输入框宽度 */
  .el-input {
    width: 100% !important;
  }

  /* 表格操作按钮 */
  .el-table-column--fixed-right .el-button {
    margin-bottom: 5px;
  }

  /* 标签页头 */
  .tab-header {
    flex-direction: column;
  }

  .tabs {
    margin: 5px 0;
  }

  /* 对话框标题 */
  .el-dialog__title {
    font-size: 16px;
  }
}

/* PC端特定样式 */
@media (min-width: 769px) {
  .content {
    /* max-width: 1200px; */
  }

  .table-area {
    width: 98%;
  }

  .diolog-content {
    min-width: 500px;
  }

  .el-form--inline .el-form-item {
    margin-right: 10px;
  }
}
.tutu {
  border: 1px solid #3333;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  cursor: pointer;
  margin-left: 6px;
}
/* 强制内容区域垂直排列 */
.ql-container {
  display: block !important; /* 确保容器是块级 */
}

.ql-editor {
  min-height: 100px;
}

/* 解决工具栏并列问题 */
.ql-toolbar {
  display: block; /* 转换为块级元素 */
  border-bottom: 1px solid #ccc; /* 可选分隔线 */
}
.he {
  margin-left: 12px;
  color: #1890ff;
  cursor: pointer;
}

.ql-container {
  border-top: none !important;
}
.editor-wrapper {
  display: flex;
  flex-direction: column; /* 关键的垂直布局 */
  border: 1px solid #ccc;
  border-radius: 4px;
  overflow: hidden; /* 防止内容溢出 */
}

.custom-editor {
  flex-grow: 1; /* 编辑区域填充剩余空间 */
}

.adds {
  color: #1890ff;
  font-size: 12px;
  position: relative;
  top: -10px;
  cursor: pointer;
}
.jibies {
  margin-top: 12px;
}
.avatar-uploader {
  position: relative;
  top: -16px;
  left: 85px;
  width: 80px;
  height: 80px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}
.avatar-uploader:hover {
  border-color: #409eff;
  background-color: #f5f7fa;
}
.inputs2 {
  width: 399px;
  padding-left: 12px;
  margin-top: 12px;
}

/* 强制编辑器容器尺寸 */
.custom-quill-container {
  height: 100%;
  min-height: 300px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

/* 工具栏汉化修复 */
.ql-snow .ql-picker-label::before,
.ql-snow .ql-tooltip::before {
  content: attr(data-label) !important;
}

/* 修复工具栏布局 */
.ql-toolbar.ql-snow {
  border-radius: 4px 4px 0 0;
  padding: 8px;
  background: #f5f5f5;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* 修复编辑器内容区域 */
.ql-container.ql-snow {
  border-radius: 0 0 4px 4px;
  font-size: 14px;
  line-height: 1.6;
}

/* 按钮汉化覆盖 */
.ql-snow .ql-stroke {
  stroke-width: 1.8px;
}

/* 下拉菜单汉化 */
.ql-snow .ql-picker-item[data-value="1"]::before {
  content: "标题1" !important;
}
.ql-snow .ql-picker-item[data-value="2"]::before {
  content: "标题2" !important;
}
/* 其他下拉项同理... */
</style>
